Bootstrap 3.3.5 

Aprenda a usar o framework Bootstrap para 
criar layouts CSS complexos e responsivos 


novatec 


Mauricio Samy Silva 

www.maujor.com 




□ CQ 



Fique conectado: 

tw i tte r. co m/n ovatec ed i to ra 
fac e b oo k. co m/n o vatec 
www ,no va tec. co m. br 


Bootstrap e um poderoso framework front-end voltado para o desenvolvimento 
rapido e facil de sites e aplica<;6es web responsivos e alinhados com a filosofia 
mobile-first. E indicado para dispositivos e projetos de todos os tamanhos e desti- 
nado a desenvolvedores com qualquer nfvel de conhecimento. 


Assuntos tratados no livro: 


Sistema de grid e sua aplica^ao na constru^ao de layouts dos mais simples 
aos mais complexos. 

Esti!iza<;ao-padrao para elementos HTML tipograficos de marca^ao de 
codigos, tabelas, formularios, botoes, imagens e (cones. 

Cria^ao e estiliza^ao de elementos de interface grafica, como barras de 
navega<;ao, janelas modais, navega^ao em abas, menus dropdown, pagi- 
na^ao, barras de progresso, paineis, agrupamento e listas. 

Integragao das funcionalidades do framework com a biblioteca jQuery 
para obten^ao de tooltip, scrollspy, popover, alertas, efeito carrossel, affix 
e co I apse. 


O ultimo capftulo do livro mostra como criar, passo a passo, a marcagao da home- 
page de um site a partir da imagem da pagina usando o grid e as funcionalidades 
do Bootstrap. 

Os assuntos e as funcionalidades mostrados no livro, quando julgado conveniente, 
sao ilustrados com um exemplo pratico que se encontra disponivel para consulta 
o n I i n e em h ttp://i ivrosdomaujo r. com.br/boo tstrap 3/co digos.h tm I. 


Neste livro voce aprendera o essencial para obter o maximo proveito dos recur- 
sos deste incnvel framework e sera capaz de criar aplicagoes web com qualidade 
profissional. 
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Introdugao 


Este livro tem por objetivo fornecer aos profissionais envolvidos com o desen¬ 
volvimento para a web os conceiros f un damentals e as tecnicas de programa^ao 
necessarias ao desenvolvimento de interfaces responsivas com uso do framework 
Bootstrap. 


Para quern foi escrito este livro 

Este livro foi escrito para aquelas pessoas envolvidas na cria^ao de sites tanto na 
area de design quanto na de desenvolvimento e programa^ao, que desejam usar 
um framework mundialmente consagrado para criar interfaces usaveis e acessiveis 
cm qualquer dispositivo, independentementc de suas caractcristicas, is to e, que 
se adaptem as mais variadas resolu^oes de tela. 

O objetivo do livro e fornecer informagoes detalhadas dos componentes do fra¬ 
mework Bootstrap, estudando seus principios e detalhando as funcionalidades 
previstas nao somente pelo core (coragao) do framework como tambem por cada 
um dos seus componentes. Explicates teoricas em linguagem cor rente e clara, 
dispensando, sempre que possivel, o jargao tecnico avan^ado sao acompanhadas 
de exemplos praticos explicados passo a passo e complementados por arquivo 
HTML para consulta. 

Para tirar o maximo proveito dos ensinamentos contidos em cada capitulo e pre- 
-requisito um razoavel conhecimento de marca^ao HTML e das CSS e da cria^ao 
de folhas de estilo. E desejavel que o leitor tenha conhecimentos necessarios para 
criar, com uso daquelas duas tecnologias, um layout simples de duas colunas. 

Os conceiros e o entendimento das tecnicas de desenvolvimento de interfaces 
responsivas sao poderosas ferramentas de apoio na cria^ao de sites mais aces¬ 
siveis, enriquecendo a experiencia do usuario. Profissionais da area de design, 
familiarizados com as tecnicas aqui descritas, contarao com uma valiosa fonte 
de conhecimento c conceiros a empregar no planejamento das funcionalidades 
para incrementar suas cria^oes, tornando-as universais. 
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Os inicianres irao se beneficiar deste livro por comegar seus estudos em uma 
fonte que aborda os principios basicos de uso de frameworks CSS e das mais 
modernas tecnicas de escrita do codigo, ensejando uma mudanga no rumo de 
seu estudo que ira reduzir a curva de aprendizado e acelerar tal processo. Nao 
se intimidem com conceiros ou terminologias que Ihes sejam completamente 
desconhecidos nos primeiros capitulos. Com a sequencia da leitura, as duvidas 
tenderao a dcsaparecer naruralmente. 


Converges tipograficas 

Coma finalidade de destacar diferentes tipos de infonnagao neste livro, adoraram- 
-se alguinas convengoes tipograficas mostradas a seguir. 

Dica 

Texto contendo uma dica sobre o assunto tratado: 


Dica: Para suporte nativo das funcionalidades mostradas neste capitulo, consulte 
o site http://caniuse.com. 


Alerta 

Texto contendo um lembrete sobre procedimento extra com relagao ao assunto 
tratado: 

Alerta : Convent ressaltar que o grid do Bootstrap foi criado segundo os principios 
da filosofia mobile first e, logicamente, e responsivo. 


Terminoiogia 

Texto estabelecendo a adogao dc grafia-padrao em todo o livro para termos ou 
frases com mais de uma terminoiogia, uma tradugao ou um significado: 


Terminoiogia: Nos codigos desenvolvidos neste livro, adotou-se a sintaxe-padrao. 
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Boostrap 3.3.5 


Chamada 

Uma chamada para uina se^ao anterior na qual o assunto em questao foi expli- 
cado com detalhes. 

Por exemplo: 

Conforme estudamos no item [3.5.12],por padrao, os botoes sao estilizados com 
urn padding que determina suas dimensdes. 

Neste exemplo, a chamada e para a se^ao 3.5.12, ou seja, capitulo 3 (o primeiro 
numero indica o capitulo), item 5, subitem 1 subitem 2. 

Mana^ao e scripts 

Nas marca^oes e nos scripts que exempli ficam a teoria, transcreveram-se somente 
os trechos que interessam ao assunto tratado. Omitiram-se os trechos que nao 
dizem respeito ou nao sao relevantes para o entendimento do assunto, para nao 
ocupar espaijo desnecessario no livro. 

Blocos de marca^ao sao marcados com fonte monoespagada: 

<ul> 

<Uxa href-'#">Hane</ax/U> 

<lixa href="#">PortfoUo</ ax/li> 

<Uxa href="#">Loja</ax/U> 
clixa href="#">Contato</ax/ lt> 

</ul> 

Trechos de marca^ao que merccem destaque sao marcados em negrito: 

<script s rc=”//ij ax. googl eapi s. com/ajax/1 i bs/jque ryy 1.11.2 / j qu e ry. in i n. j s ”> </s c r i pt> 
<script>window.jQuery || docunent.write('<script src="../bootstrap/js/jquery.nin.js"> 

<\/ scri.pt>')</script> 

<scri.pt type="text/javascript" src=".. / boot strap/ j s/bootstraps in.js" ></ sc ript> 

<scri.pt type="text/jav3script"> 

$(' .dropdown-toggle 1 ). dropdown (); 

<1 script* 

<body> 

<htnl> 

Para explicar passo a passo, quando julgado convenientc, cada linha do script 
foi apresentada com suas linhas numeradas e, a seguir, os comentarios foram 
referenciados ao numero da linha comentada: 
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• HTML 

1. ebutton type="button" class-'btn btn-prinary btn-lg" data-toggle="nodal" data- 
target="#nodalLogin"> 

2. Abrir janela nodal 

3. </button 

4. <div class="nodal fade" id="nodalLogin" tabindex="-l" role="dialog" ana- 
labelledby="nodalLoginLabel"> 

5. <div class="nodal-dialog" role="docunent"> 

6. <div class="nodal-content"> 

7. <div class="nodal-header"» 

8. <button type="button" class="close ri data-disniss="nodal" 

aria - label= "Close"> <span aria - hidden="true ">&tines; </ spanx/button> 

9. <h4 class="nodal-title">Area adninistrativa</h4> 

10. </div> 

11. <div class="nodal-body"> 

12 <!-- conteudo da janela nodal --> 

13. </div> 

14. <div class="nodal-footer"> 

15. ebutton type="button" class=”btn btn-default" data-disniss="nodal"> 

Fechar</button> 

16. </div> 

17. </div> <!-- /'.nodal-content --> 

18. </div> <!-- /.nodal-dilog --> 

19. </div> <!-- /.nodal --> 

[.../c5/moda!-data-toggle.htmlj 

Codigo comentado: 

Linha(s) Descriqao 

Linhas 1 a 3 Botao para abertura da janela modal. O atributo data-target deve apon- 
tar para o valor do atributo id do container geral da janela; em nosso 
caso, o diuttnodalLogtn na linha 4. Opcionalmente, em lugar de urn botao 
para abrir a janela, poderiamos usar uni link, e neste caso o atributo 
href do link apontaria para o id do container geral da janela; em nosso 
caso, href=''ttnodalLogin". A classe btn definida para o link de abertura da 
janela faz com que os mecanismos internos do Bootstrap transformem 
o link em um botao. Esse botao pode ser estilizado com uso de classes 
adicionais,talcomo btn-prinary ebtn-lg.Aclassedata-toggle, definida para 
aquele link, informa ao Bootstrap que a janela modal tera seu script 
de abertura e fechamento inserido automaticamente sent necessidade 
de codificacao JavaScript pelo autor. 
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Linha(s) 
Linha 4 a 19 


Descrpo (cont.) 


Boostrap 3.3.5 


Marcagao do div container da janela modal. A classe nodal e de uso 
obrigatorio e informa ao Bootstrap que trata-se do container de uma 
janela modal. A classe fade faz com que o efeito de abertura seja por 
deslizamento da janela no sentido vertical, na direcao de cima para 
baixo e com efeito de esmaecimento. Opcionaimente, podemos omitir 
o valor fade que produz o efeito de mostrar e esconder a janela sem 
deslizamento e esmaecimento, ou seja, abertura e fechamento fixa na 
sua posigao. Sugiro fazer uma copia do exemplo e retirar a classe fade 
veri ficando na pratica os dois efeitos de aber tura/fechamento. O atributo 
id e de livre escolha do autor. 


Linhas 5 e 6 Containers auxiliares para estilizagao e scripts. 


Arquivos para download 

Os scripts mostrados no livro estao disponiveis para consulta online em 
http://livrosdomaujor.com.br/bootstrap3/codigos.html. Os arquivos foram nomeados 
com sintaxe propria, conforme o exemplo a seguir: 

http://livrosdomaujor.com.br/bootstrap3/codigos/c4/botoes-drcfpdown.html 

Este e o URL (enderego na web) do arquivo que mostra um exemplo contido no 
capitulo 4 do livro e referente a funcionalidade dropdown para botoes. 

Adicionalmcnte, ao final da marcagao, ha uma indicagao do cnderego para o 
arquivo conforme convengao rnostrada no exemplo a seguir: 

• HTML 

<div class=”btn-gro(jp ,; > 

■cbutton type="button" class="btn btn-default>EDITAft</bjtton> 

<button type="button" class="btn btn-default dropdown-toggle" 
data-toggle=' 1 dropdown 1 ' aria-expanded="false"> 

EDITAR <span class= "caret"x/span> 

</button> 

<ul class="dropdown-nenu” role="nenu"> 

<lixa href="#">novo</a></U> 

<lixa href="#">abrlr</ax/li> 

<lixa href="#">fechar</ax/li> 

<li class="divider"x/li> 

<lixa href = "#">salvar</ax/li> 

</ul> 

</'div> 

[.../c4/botoes-dro pdown.html] 
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Destaques em geraf 

Palavras ou termos cujo significado deva ser destacado sao grafados em italico. 
Por exemplo: 

O Bootstrap oferece ainda alguns grupos de classes para estiliza^ao avan^ada de 
tooltip em forma diversa daqueia do tooltip basico. 

Variaveis 

Valores variaveis em codigos sao grafados em italico. 


Arquivos dos exemplos do livro 

Os links para os arquivos dos exemplos deste livro eonstam de uma pagina web 
localizada cm http://www.liurosdomaujor.com.br/bootstrap3/codigos.him!. 

Por tratar-se de um livro oferecido gratuitamente, tanto o autor como a editora se 
desobrigam de presta^ao de qualquer tipo de suporre tecnico aos ieitores. 
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CAPITULO 1 

Apresenta^ao do Bootstrap 


Neste capitulo, faremos a apresentagao do framework Bootstrap. Veremos a de- 
fini^ao, o historico e as razoes para o uso do Bootstrap. Listaremos as segoes e 
seus conteiidos onde constam os assuntos a serem tratados no livro. Mostraremos 
como criar o template minimo para desenvolver uma aplica^ao, apresentaremos 
o Bootlint e abordaremos o suporte e a acessibilidade do framework. 

Ao longo dos textos e das explicates contidas no livro, para nao repetir exaus- 
tivamente o termo “framework Bootstrap” o abreviaremos para simplesmente 
Bootstrap. Assim, neste livro, salvo indica^ao contraria, Bootstrap e o mesmo que 
framework Bootstrap. 


1.1 Introduce) 

Bootstrap e o mais popular framework JavaScript, HTMLe CSS para dcscnvol- 
vimento de sites e aplica^oes web responsivas e alinhadas com a filosofia mobile 
first. Toma o desenvolvimento front-end muito mais rapido e facil. Indicado para 
desenvoivedores de tod os os niveis de conhecimento, dispositivos de todos os 
tipos e projetos de todos os tamanhos. 


1.1.1 Definite 

O site do Bootstrap o define como urn poderoso, elegante e intuitivo framework 
front-end que possibilita ura desenvolvimento web de modo agil c facil. 
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1.1.2 Historico 

No dia 19 de agosto de 2011, Mark Otto (@mdo), urn desenvolvedor trabalhando 
no Twitter, criador do Bootstrap juntamente com Jacob Thornton anunciou 

ao mundo o larujamento do Bootstrap em um artigo publicado no blog do Twitter* 

Iniciou o artigo dizendo estar feliz com o lan^amento de um kit de ferramcntas 
front-end destinado a agilizar o desenvolvimento de aplica§oes web. 

Naquele artigo, relatou que no inicio do Twitter cada desenvolvedor usava a 
biblioteca que Ihe era familiar para solucionar os problemas de front-end. Esse 
proeedimento criou inconsistencias, dificultando a integra^ao, a escalabilidade e 
a manuten^ao das aplicacoes criadas por diferentes desenvolvcdores da equipe. 

Bootstrap foi a proposta de soluijao para aquelas inconsistencias. Apresentada na 
primeira Twitter Hackweek realizada na semana de 22 a 29 de outubro de 2011, 
de la saiu com sua primeira versao estavel e pronta para uso. 


1.1.3 Por que usar Bootstrap 

No artigo de lan^amento do Bootstrap, Mark Otto, ao explicar as razoes para 
usar Bootstrap, comega afirmando que o coragao do Bootstrap nada mais e do 
que CSS criado com LESS, um pre-processador destinado a gerar folhas de estilos 
CSS capaz de oferecer muito mais flexibilidade e poder do que as folhas de estilos 
convencionais, ou nao processadas. Posteriormente foram criadas funcionalidades 
que permitem usar nao somente LESS, mas tambem SASS como pre-processador 
CSS para o Bootstrap. 

LESS e SASS sao capazes de oferecer uma vasta gama de funcionalidades, tais 
como declaragoes CSS aninhadas, variaveis para valores de propricdades CSS, 
mixins (especie de classe capaz de ser reusada), operadores e fun^oes para de- 
clara^ao de cores. 

Uma vez compilado via LESS ou SASS, o resultado e uma folha de estilos pura, 
cuja implementa^ao na aplica^ao e muito simples; basta linear o arquivo CSS ao 
documento. Outro beneficio e que nao ha imagens, Flash ou JavaScript adicionais, 
somente folha de estilos. 

Nao e do escopo deste livro dctalhar o uso dos pre-processadores LESS e SASS 
para criar folhas de estilos para o Bootstrap. 
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LI.4 Se^oesda documenta^ao do Bootstrap 

Para fins de estudo,adotarcmos neste livro as mesmas cinco se^oes constantes do 
sire do Bootstrap, conformc lisradas a seguir. 

• lntrodu;ao - Segto de apresenta^ao dos fundamentos ou da funda^ao inicial 
para a cria^ao com uso do Bootstrap. Nessa se^ao sao lisradas as ferraraentas 
de desenvolvimento, os arquivos do download do Bootstrap e a cria^ao do 
ambiente de desenvolvimento. Sao mostrados os templates HTML5 para 
criagao de aplica^oes em layouts fixos, fluidos e responsivos. 

• CSS — Nessa se^ao sao mostradas as regras CSS comuns, tais como definigoes 
de valores CSS para tipografia em geral, CSS reset etc. Sao ainda detalhadas 
as declara^oes CSS para varios elementos da marca<;ao HTML, tais como 
tabelas, formularios, botoes, imagens, uso de icones e muito mais. 

• Componentes - Nessa segao se estuda a cria^ao de componentes de interface. 
Os componentes de interface previstos no Bootstrap sao listados a seguir. 

• Glifos 

• Dropdown 

• Agrupamento de botoes 

• Dropdown com botoes 

• Grupamento de inputs 

• Navega^ao 

• Barra de navega§ao 

• Breadcrumbs (caminho da navega^ao) 

• Pagina^ao 

• Rotulos e marcadores 

• Badges (marca de desraque) 

• Jumbotron (tela de destaque) 

• Page header (clemento hi) 

• Thumbnails 

• Alertas 

• Barra de progresso 
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• Objetos de midia 

• Grupamento de listas 

• Paineis 

• Embed responsivo 

• Wells (container estilizado com bordas arredondadas, cor de fundo e 
efeito inset) 

• Plugins - Nessa segao se estuda a integragao dos plugins JavaScript com o 
Bootstrap. Os componentes gerados pelos plugins e as consideragoes sobre 
o uso da linguagem previstos no Bootstrap sao listados a seguir. 

• Visao geral 

• Transigoes 

• Janelas modais 

• Dropdown 

• Scrollspy 

• Abas 

• Tooltip 

• Popover 

• Alertas 

• Bo toes 

• Collapse 

• Carousel 

• Affix 

• Personaliza^ao - Trata-se de uma ferramenta online para fazer download 
personalizado de acordo com as necessidades especificas de um projeto. 
Essa ferramenta encontra-se cm http://getbootstrap.com/customize/ e seu uso 
e bem facil e intuitivo. 

Cada uma das segoes listadas anteriormente sera objeto de estudo e detalhamento 
neste livro. 
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1.2 Ferramentas de desenvolvimento 

Para desenvolver urn layout e criar os componentes graficos de uma aplica^ao web, 
voce precisa de urn editor de texto, um navegador web e obviamente a estrurura 
de arquivos do Bootstrap. Se voce optou por estudar o assunto proposto neste 
livro, supoe-se que tcm um conhecimento razoavel de marca^ao HTML e folhas 
de estilos CSS, assuntos estes que nao fazem parte do escopo do livro. 

Nao vou indicar um editor de texto e navegador web, pois eomo voce conhece 
HTML e CSS, ja usa um deles. Assim, use o editor de texto e o navegador de sua 
preferencia. 


13 Download 

Na homepage do site do Bootstrap, em http://getbootstrap.com , voce encontra um 
link para download do Bootstrap. 

Sao disponibilizadas tres versoes para download denominadas Bootstrap, Source 
e SASS. A versao Bootstrap e a minima requerida para cria^ao com uso de tod as 
as funcionalidades do Bootstrap, e e ela que usaremos neste livro. A versao Source 
inclui toda a docuinenta^ao do Bootstrap, e a versao SASS e para uso com o pre- 
-processador. 

Fa$a o download da versao Bootstrap, descomprima o arquivo compactado em 
uma pasta de sua livre escolha, e voce tera a estrutura de pastas e arquivos, como 
mostrado na figura 1.1. 

Na figura 1.1, repare que existem arquivos que tern uma forma compactada (mi- 
nificada - .min) e uma forma nao compactada. A forma nao compactada e para 
uso opcional em fase de produ^ao, pois sao arquivos comentados e estruturados 
visualmente para facil leitura por humanos. 

Depois de langado o projeto, esses arquivos deverao ser substituidos pelos seus 
equivalentes conipactados, que sao mais leves c de carregamento mais rapido, mas 
nao se esque^a de compactar o arquivo caso voce ten ha feito alguma tnodifica^ao 
no original, o que e pouco provavel. 

A pasta-raiz obtida com a descompactagao do arquivo zipado do download 
denomina-se bootstrap-versdo-dist, em que versao e a versao atual do Bootstrap 
(por cxemplo, bootstrap-3.3.5-dist para o download da versao 3.3.5). Na pasta-raiz 
encontra m-se tres subpastas — css, fonts, js e dentro delas, os arquivos, confer me 
mostrados na figura LI. 
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" | bootstrap-vers3o-disi 


• [=J bootstrap.css 

• Q bootstrap.css.map 
§ boots trap. min. css 

• \^\ bootstrap-theme.css 

• Q bootstrap-theme.css.map 
\S\ bootstrap-theme.min.css 

| fonts 

j glyph Econ s-ha I f 1 1 ng s-regu la r.e ot 
§ glyph icon s-ha If I ings-regu la r. svg 
[j=l glyph icons-ha If I \ ng s-regu la r.ttf 
Q glyph icon s-hal f 1 1 ngs-regu la cwoff 
\S\ glyph icon s -hal fling s-regu la r.woff2 

• |j|] bootstraps 
\S\ bootstrap.min.js 

• \^\ npm.j’s 


= [ jqgery.min.js 


Figura 11-Arquivos do download do Bootstrap , 

Observe na figura que alguns arquivos foram destacados com a marca de uma 
bolinha. Tais arquivos podem ser apagados da pasta caso voce nao os use em 
fase de produ^ao. Se usa-los, apague depois dc lan^ado o projeto, pois, como dito 
anteriormente, devem ser substituidos pelos seus correspondentes minificados. 

Aseguir alguns comentarios sobre a finalidade dos arquivos. 

• bootstmp.css e o arquivo principal dc estiliza^ao do Bootstrap em versao 
nao comprimida. Usa-se a niesma versao com prim id a (ou minificada) 
bootstrap.min.css. Se voce pretende desenvolver uma folha de estilos persona- 
lizada, de a eia um nome tal como custom.css, e quando terminar, comprima 
o arquivo. Atrele sua folha de estilo personalizada ao documento criando 
um link para ela depois do link que aponta para bootstrap.min.css. 

• boots trap-theme, csf e um arquivo de estiliza^ao do Bootstrap que adiciona 
efeitos especiais de sombras, gradientes, 3D etc. em componentes tais como 
botoes, paineis, caixas de destaque etc. Usa-se a mesrna versao comprimida 
(ou minificada) bo ot strap-th cme. mm. css . Se voce pretende adicionar tais efeitos 
especiais em sua interface, use este arquivo. O arquivo bootstrap-theme, min.css e 
um arquivo de uso facultativo. Nos exemplos constantes deste livro, usaremos 
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esta folha de estilos. Para verificar seus efeitos na pratica, comente na marcagao 
da se^ao head do exemplo, o link que aponta para essa folha de esrilos. 


Alerta: Caso sua opgao seja por usar os efeitos especiais de estilizaqao, o link para 
o arquivo bootstrap-thefne.min.css devera vir na marca^ao HTML depois do link 
para o arquivo bootstrap, min. css. 


• bootstrap, css. map e bootstrap-1herne, css. map sao arquivos destinados a mapear 
arquivos CSS minificados e faze-los leglveis para hum an os em ferramentas 
de debug, tipo as ferramentas do desenvolvedor nativas dos navegadores. 
Usam-se somente em fase de desenvolvimento de funcionalidades e temas 
CSS e nao tem efeito sobre o produto final (o site ou a aplica^ao) criado. 

• bootstrap.js e o arquivo, em versao nao comprimida, que content os scripts 
que fazem funcionar os plugins nativos do Bootstrap. Usa-se a mesma 
versao comprimida (ou minificada) bootstrap.min.js. Se voce pretendc desen- 
volver scripts personalizados, de ao arquivo urn nome tal como custom.]s e, 
quando terminar, comprima o arquivo. Atrele seus scripts personalizados 
ao documento criando urn link para o arquivo depois do link que aponta 
para bootstrap.js. 

• npm.js e o arquivo para instala^ao do Bootstrap com NPM (fora do escopo 
deste livro). 

O arquivo de no m in ad o j query, m i n.js em destaque na figura ndofazparte do download. 
Caso seu projeto preveja uso de componentes que usam JavaScript (plugins na¬ 
tivos do Bootstrap), sera necessario carregar a biblioteca j Query na versao 1.11.2 
ou posterior. Consulte o site da jQuery para decidir qual c a versao mais atual (e 
posterior a jQuery 1.11.2) indicada para os navegadores aos quais voce quer servir 
seu projeto. 

Assim, deve-se, obrigatoriamente, fazer o download da biblioteca no site 
http://jquery.com e ter o arquivo gravado na pasta js do download. Ele servir a 
como fallback para o caso de falha no link para um CDN, como veremos no item 
[1.4] adiante. 

Essa e a configura^ao basica do Bootstrap necessaria a criagao de layouts fixos, 
fluidos e responsivos. Com apenas o arquivo CSS bootstrap, min.css lincado ao 
documento voce podera come^ar a explorar essa poderosa ferramenta, e com o 
progresso no estudo e a consequente necessidade de uso de componentes que 
dependent de JavaScript, ira precisar linear tambem o arquivo bootstrap.min.js. 
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1.4 Templates HTML 

O Bootstrap foi desenvolvido e otimizado para ser usado com marcagao HTML5. 
Assim o template rnmirno para criar uma aplica^ao que use o Bootstrap e mos- 
trado a seguir. 

<1DOCTYPE htpfl> 

<htnl lang="pt-br"> 

<head> 

<nieta charset="utf-8”> 

cneta http-equiv= "X-UA-Conpatible" content="IE=edge"> 

<Fieta nane= "viewport" content="width=device-width, initial-scale=l"> 

<!-- Estas 3 neta tags deven obrigatorianente ser as prineiras na se?ao head --> 

<!-- As denars deven vir depois delas --> 

<title>Tenplate ninino para uso do Bootstrap</title> 

<link href=”. ./bootstrap/css/bootstrap.nir.css" rel="stylesheet"> <!-- CSS do Bootstrap --> 
<!-- HTH5 shin and Respond, js para suporte dos elenentos HTM_5 e das nedla queries ao IE8 --> 
<!-- Atencao: Respond, js nao funciona en paginas carregadas cofi uso do protocolo file:// --> 
if It IE 9]> 

<sc ript src="https://oss.naxcdn.con/htnl5shiv/3.7.2/htnl5shiv.nin.js"></script> 
<script src="https://oss .naxcdn. con/respond/1.4.2/respond.rtin. js"></script> 

<1[endif]--> 

</head> 

<body> 

<hl>Tttjlo da aplica?ao</hl> 

</body> 

</htnl> 

Com este template e possivel desenvolver uma aplica^ao web que use as funciona- 
lidades do Bootstrap que dependem apenas de estilizaqao, por exemplo: tipografia, 
botoes, paineis, se^ao em destaque etc. Nao e possivel usar as funcionalidades 
que dependem dos plugins JavaScript nativos do Bootstrap, por exemplo: barras 
de navega^ao, janelas modais, slideshow etc. 


Alerta: Nos exemplos constantes deste livro nao sera considerado o suporte para 
o IE8. 


Caso voce qucira usar, no seu projeto, os 12 plugins nativos do Bootstrap, lis- 
tados na se^ao JavaScript do item [1.1.4], devera incluir no template, mostrado 
antcriormente, a biblioteca j Query e o aquivo bootstrap.mm.js, como mostrado 
em destaque a seguir. 
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<body> 

<hl>Titulo da aplicagao</hl> 

<!-- jQuery (caso se use plugins JavaScript do Bootstrap) -■> 

<scri.pt src="http://code.jquery.con/jquery-1.11.2.nin.js" type="text/javascript"> 
</script> 

<script type="text/jav3script"> // fallback para jQuery 
//<![CDATA[ 

{window.jQuery) | |docunent.write(' <script type="text/javascript 1 ' 
src=",./bootstrap/js/jquery.nin.js"><\/sc ri.pt> 1 );//]]> 

</script> 

<!■■ Bootstrap --> 

<script type-'text/javascript" src="../bootstrap/js/bootstrap. nin. js"x/script> 

</body> 

</htnl> 

Conforme mostrado no codigo, e de boa pratica usar ura CDN para linear para 
a biblioteca jQuery. Em nosso caso, escolhemos o CDN da j Query Caso o link 
para o CDN apresente qualquer problema, existe um link alternative (fallback) 
para um arquivo da biblioteca jQuery hospedado no servidor da aplicagao e 
colocado na pasta js do download, conforme mostrado e comentado na figura LI. 

Alternativamente, voce pode usar o CDN Google, apontando para: 

fi ttpj/ajax, googleapis. com/ajax/libs/jqu e ry/ultima- versao/jqu ery. min.js 

ou o CDN da Microsoft, apontando para: 

http://ajax.aspnetcdncom/ajax/jquery/jqitery-ultima-versao.js 


Alerta: Ao optar por um CDN, confira se a versao que voce quer usar ja esta 
hospedada no CDN. Cole o endere^o do arquivo na caixa de enderegos do 
navegador e certifique-se de que o link nao esta “quebrado” e aponta para o 
arquivo pretendido. 


Opcionalmente,vocepodera usar o CDN do Bootstrap (http://www.bootstrapcdn.com/) 
para linear, tambem, os arquivos do Bootstrap como mostrado a seguir: 

<!-- Versao conpilada e minificada das CSS --> 

<Unk rei="stylesheet" 

href="https://naxedn.bootstrapedn.con/bootstrap/3.3.5/css/bootstrap.nin.css"> 

<!-- Tena opcional --> 
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<link rel="stylesheet 1 ' 

href="https://naxcdn.bootstrapcdn.con/bootstrap,/3.3.5/css/bootstrap -theme.min.css"> 
<!-- Versao conptlada e mtntficada da JavaScript --> 

<script src="https://naxcdn.bootstrapcdn. cor/ bootstrap/3.3.5/js/bootstrap.nin.js"> 
</script> 

Convem notar que o arquivo bootstrap.min.js content todos os plugins do Bootstrap. 
E muito provavel que o sen projeto use somente alguns deles. Para estas situates 
existe a possibilidade de personalizar o download, obtcndo somente os plugins 
necessarios ao projeto. 

Convem notar que nestas situates devemos usar a versao do download perso- 
nalizado e nao um CDN que fornece todos os plugins. 

Para personalizar o download dos plugins e tambem das CSS e dos componentes 
do Bootstrap, visite a pagina http://getbootstrap.com/customize/no site do Bootstrap. 


1.5 Bootlint 

Bootlint e uma ferramenta de desenvolvimento, oficial do Bootstrap, destinada a 
examinar a marca^ao HTML criada para uma aplica^ao ou um site descnvolvido 
com uso de Bootstrap e infer mar aos desenvolvedores possiveis “bugs” ou nao 
conformidades encontradas na marcagao. 

A ferramenta e fornecida em forma de bookmarklet (para ser instalada em um 
navegador); seu codigo e as instru^oes de instalagao podem ser encontrados no 
GitHub ern http://kwz.me/l4. 

Das diversas formas de instala^ao, a mais simples e imediata e arrastar o codigo 
JavaScript do bookmarklet, que se encontra no GitHub sob o titulo “Getting 
Started” subtitulo “In the browser” para a barra de favoritos do navegador. 

Depois de instalada como favorite no navegador, abra a pagina web que contem 
a marca^ao HTML para o Bootstrap e abra tambem o console do navegador. 
Limpe o console e clique no bookmarklet criado nos favoritos. Como resultado 
sera aberta uma janela tipo alerta da JavaScript informando sobre a exisrencia 
ou nao de “bugs” na pagina. 

Feche a janela e, caso existam “bugs” eles serao descritos sumariamente no console 
do navegador e um codigo sera fornecido. No GitHub, em http://kwz.me/IO, voce 
encontra a descri^ao de cada codigo. 
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E altamente recomendavel instalar e usar esta ferramenta no seu ambiente de de- 
senvolvimcnto verificando constantemente as marca^oes criadas e nao deixando 
para verificar rudo no final do projeto. 


1.6 Modelo CSS e o box-sizing 

O Bootstrap declara, era sua folha dc estilos, o moderno Modelo CSS inodificado 
usando a propriedade CSS box-sizing de modo a excluir padding e margin das dimen- 
soes dos boxes, conforme a regra de estilos mostrada a seguir. 

* ( 

-webkit-box-sizing: border-box; 

-moz-box-sizing: border-box; 
box-sizing: border-box; 

} 

*:before, 

*:after { 

-webkit-box-sizing: border-box; 

-moz-box-sizing: border-box; 
box-sizing: border-box; 

} 

Esta declara^ao pode conflitar com softwares dc terceiros, tais como Google Maps 
e Google Search Engine, inseridos em uma pagina que use o Bootstrap, pelo fa to 
de tais softwares usarem em suas CSS o Modelo CSS tradicional. 

Assim, esteja ciente de que se o layout em sua pagina “quebrar” por causa da 
insergao de um widget ou outro software qualqucr pertencente a terceiros, sera 
necessario que voce localize e isole a parte da marca^ao HTMLonde o problema 
ocorre e crie uma folha de estiio espedfica para reverter o modelo CSS naquele 
trecho da marcagao, ou, em lugar de uma folha de estilos espedfica, adicione rcgras 
CSS, conforme sugeridas a seguir, na folha de estilos do Bootstrap. 

Como regra geral, existem duas solu^oes para estes casos. A priineira, reverter o 
modelo CSS para um elemento da marca^ao; e a segunda, para uma determinada 
regiao da marca^ao, conforme sugerido a seguir. 

/* Opgao 1: para un elenento da narcagao */ 

.element { 

-webkit-box-sizing: content-box; 

-moz-box-sizing: content-box; 


Conheca os livros do Maujor: http://livrosdomaujor.com.br 


Capituio 1 ■ Apresentat;ao do Bootstrap 


31 


box-sizing: content-box; 

} 

/* Op^ao 2: para una regiao da rtarcagao cujo elenento ancestral deve receber a classe 
reset-box-sizing */ 

.reset-box-sizing, 

.reset-box-sizing *, 

.reset-box-sizing *:before, 

.reset-box-sizing *:after { 

-webkit-box-sizing: content-box; 

-noz-box-sizing: content-box; 
box-sizing: content-box; 

} 

1.7 Acessibiiidade 

O Bootstrap contem fundonalidades que facilitam o cumprimento das diretrizes 
dc acessibiiidade previstas pelo W3C 

Para criar um link que permita as tccnologias assistivas pular o menu de navegaglo 
e ir para o conteudo, sao previstas as classes sr-only e sr-only-focusable, que devem 
ser aplicadas a uma marca^ao-padrao, conforme mostrado a seguir. 

<a href="#conteudo" class= "sr-only sr-only-focusable">Pular para o conteudo</a> 

<!-- nenu de navegacao --> 

<div id="conteudo" tabindex=''-l"> 

<!-- Conteudo principal da pagina --> 

</div> 

A marca^ao mostrada, quando for o caso de se usar, deve ser colocada no inicio 
da pagina. As classes sr-only e sr-only-focusable sao nativas do Bootstrap. 

A classe sr-only faz com que o texto do link nao seja visivel na tela, mas “visto” 
por tccnologias assistivas, tais como leitores de tela. 

Para usuarios sem restri^oes visuais que navegam com auxilio do teclado, a classe 
sr-only-focusable faz com que o texto do link se tome visivel quando o link reccbe o foco. 

O par atributo/valor tabindex="-l" corrige bugs de foco em alguns navegadores. 

O exemplo pratico mostrado a seguir cria um link tipo "Pillar navegacao" e 
encontra-se disponivel para consulta online. Nao se preocupc com a marca^ao 
HTML que nao esteja em destaque. Ela e propria do Bootstrap e sera cstudada 
no proximo capituio. 
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ca href="#conteudo n class="sr-only sr*only-focusable">Pular para o conteudo</a> 


<div class="row"> 

<div class="col-(id-6”> 

<h3>flenu de navega^ao</h3> 
<p>Extensa Usta de links</p> 
<ul> 

<lixa href=''#">link</a></li> 
<1-- nais links --> 

</ul> 

</'div> <1-- /..col-nd-6 --> 

</div> <1-- /.row --> 


<div class="row"> 

<div class="col-nd-6"> 

<hl id="conteudo" tabindex="-l">Conteiido principal da paginac/hl? 

<p>bla...bla...bla...bla</p> 

<1-- nais conteudo --> 

</div> <1-- /.col-nd-6--> 

</div> <1-- /.row --> 

[.../c1/pular-navegacao.html] 

Abra este arquivo em um navegador e prcssione a recla Tab. Essa aqao ira rcvelar 
no topo da pagina o texro do link. A seguir, tecle Enter para navegar diretamente 
para o conteudo da pagina. 


1.8 Suporte 

O Bootstrap foi criado para fundonar em navegadores modernos tanto em desktop 
como em dispositivos moveis. Navegadores antigos falharao na cstiliza^ao, mas a 
parte funcional da pagina sera preservada. 

Quanto ao Internet Explorer, o suporte e consistente nas versdes IE9 e superio- 
res. Se voce pretend e servir sua aplica^ao para o IE 8, deve incluir os scripts shim 
e Respond.js que se destinam a possibilitar que aquele navegador reconheqa os 
elementos da HTML5 e as regras media queries respectivamente, pois ele nao 
oferece suporte nativo para tais funcionalidades. Nao e do escopo deste livro 
detalhar as implicates e os detalhes de funcionamento e inclusao destes scripts. 
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Os exemplos constantes deste livro nao consideram o suporte para o IE8. 

Observe as tabelas LI e 1.2 detalhando o suporte ao Bootstrap por dispositivos 
e navegadores. 


Tabela 1.1 - Suporte ao Bootstrap por navegadores 



Chrome 

Firefox 

Internet Explorer 

Opera 

Safari 

Android 

SIM 

SIM 


NAO 

N/A 

iOS 

SIM 

N/A 

N/A 

NAO 

SIM 

Mac OS X 

SIM 

SIM 


SIM 

SIM 

Windows 

SIM 

SIM 

SIM 

SIM 

NAO 


Tabela 1.2 - Suporte ao Bootstrap pelos 1E8 e IE9 


Funcionalidade 

Internet Explorer 8 

Internet Explorer 9 

border-radius 

NAO 

SIM 

box-shadow 

NAO 

SIM 

transform 

NAO 

SIM, comprefixo-ms 

transition 

NAO 

placeholder 

NAO 


Para suporte as funcionalidades HTML5 e CSS3 cm geral, consulte o site caniuse 
(http://kwz.me/I5). 

Isso e tudo que voce precisa para comegar o estudo do Bootstrap. Nos proxitnos 
capitulos, detalharemos as funcionalidades do Bootstrap desenvolvendo exemplos 
praticos que mostram desde a criagao de simples componentes de interfaces ate 
o desenvolvimento de layouts complexos. 

Para os exemplos constantes deste livro, criamos uma pasta-raiz denominada 
codigos e, dentro dela, uma subpasta denominada bootstrap contendo o diretorio e 
os arquivos obtidos do Bootstrap, ou seja, renomeamos a pasta bootstrap-versao-dist 
mostrada na figura 1.1 para simplesmente bootstrap e mais subpastas para os 
capitulos (cl, c2, c3, c4 etc.) contendo os arquivos dos exemplos, tudo conforme 
mostrado na figura 1.2. 
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"^1 cod isos 

P I bootstrap 


Pi css 

f?| bootstrap, mirvcss 

[j^l bootstrap-theme,min,css 

fonts 

[^| gly phicons-ha Ifli ngs-reg u I ar,eot 
j] glyphicons-balf lings-regy I ar.svg 

[jE) glyphEcons-li3lllijig5-regu!ar.ttf 
[E] glyphkons-ba I flings-neg u I ar,woff 
(E) glyphicons- ha I fli ngs-reg u I ar. woff2 




j=| bootstrap, minjs 
J jquery.min.js 


n ci 

f=] exeroploLhtml 
[E[ exemplo2.html 
jj mgis esemplps 

m- 

M# 

Me... 


Figura 1.2 - Estrutura de pastas para arquivos dos exempt os do hero. 


Conheca os livros do Maujor: http://livrosdomaujor.com.br 







CAPITULO 2 

Fundamentos 


Neste capitulo estudaremos os fundamentos do Bootstrap. Sera mostrada a nor- 
maliza^ao via reset de valores de propriedades CSS. Mostraremos a criagao de um 
grid fixo para desenvolvimento de layouts e, no final do capitulo, estaremos cientes 
dos conceitos basicos de frameworks CSS cm geral e em condi^oes de comegar o 
estudo da estrutura do grid e das funcionalidades do Bootstrap. 


2.1 Marca^ao HTML 

O Bootstrap foi criado para ser usado com a linguagem de marca^ao HTML5. 
As suas funcionalidades foram desenvolvidas considerando ccrtos elcmcntos 
exclusivos daquela linguagem, bem como de propriedades CSS avan^adas que 
requerein o uso da HTML5. 

Assim, a marca<;ao HTML de uma aplicagao devera obrigatoriamente con ter o 
DOCTYPE da HTML5 como mostrado a seguir. 

<’. OOCTYPE htnl> 

<htnl lang="pt-br"> 

</html> 


2.2 CSS reset 

O termo reset no contcxto de programagao podc ser traduzido, usando linguagem 
nao tecnica, como a agao de “zerar” valores previamente definidos. 

CSS reset e uma tecnica inventada por Eric Meyer (http://meyerweb.com/erk/tools/css/ 
reset/) no ano de 2007, amplamente usada desde entao, que consiste em se definir 
uma folha de cstilos cuja finalidade e “zerar” valores CSS padrao dos navegadores. 
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Todo navegador tern uma foiha de estilos nativa que define as propriedades CSS 
iniciais dos eiementos da marcagao. Voce podera visualizar essa foiha de estilos 
em agao ao criar um documento onde faga constar, por exemplo, cabegalhos (hi, 
hZ, h3 etc.), paragrafos (p), listas (ol, ul, dl) etc. Ao visualizar o documento em um 
navegador, note que os conteudos dos eiementos da marea 910 tem uma estilizagao 
inicial, sem que voce tenha declarado qualquer foiha de estilos. A cor de fundo 
do elemento body e branca, os textos sao em preto, cabegalhos sao em negrito com 
tamanhos de fonte diferentes, a fonte e da familia serif, existem margens entre 
cabegalhos e paragrafos, listas sao endentadas, e por ar vai. 

Se voce decidiu criar o documento sugerido, experimente visualiza-lo em diferentes 
navegadores e compare as render izagdes. Vai notar, nos diferentes navegadorcs, 
que muitos dos estilos aplicados sao os mesmos, tais como cor de fundo bran¬ 
ca do elemento body, preta dos textos, negrito em cabegalhos, familia serif para 
fontes etc. No tar a tambem que a render izagao nao e exatamente a mesma, por 
exemplo, quando se trata do posicionamento e do tamanho dos textos na pagina. 
Isso acontece porque cad a navegador adota sua foiha de estilos propria e alguns 
valores CSS nessas folhas, tais como valores para as propriedades nargin, line-height, 
font-size etc., diferem de um navegador para outro. Isso em deterininados casos 
pode ser desastroso para o layout e pode exigir do desenvolvedor trabalho extra 
para tratar das inconsistencias entre navegadores resultantes das diferengas entre 
folhas de estilos nativas. 

A finalidade das CSS reset, que nada mais sao do que um conjunto de declaragoes 
de estilos (uma foiha de estilos), e padronizar, para os navegadores, a render izagao 
inicial dos eiementos da marcagao, zerando os valores de algumas propriedades 
CSS, tais como margin e padding, e estabclecendo um valor-padrao para outras, tais 
como line-height, vertical-align, font-size, sobrescrevendo a foiha de estilos nativa 
do navegador e resolvendo o problcma da inconsistency de estilizagao inicial 
entre navegadores. 

No intcio de 2012, Nicolas Gallagher, um desenvolvedor trabalhando 
no Twitter, e Jonathan Neal criaram o projeto denominado normalize-css 
(http://necolas.github.com/normalize.css/), cuja proposta era disponibilizar para a 
comunidade de desenvolvedores front-end uma foiha de estilos reset destinada a 
padronizar a renderizagao nativa dos navegadores. Na pagina do projeto, os au- 
tores discorrem sobre as diferen^as e vantagens de usar normalize.css cm rela^ao 
as CSS reset de Eric Meyer. 

O Bootstrap, o projeto HTML5 Boilerplate, a NASA, entre outras grandes 
companhias, atualmente usam o normalize.css. Mesmo que voce ja conhe^a as 
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tecnicas de CSS reset, aconselho a abrir a pagina contendo a folha de estilos 
de normalize.css clicando o link para download do arquivo no endereqo web 
http://necoias.github.com/normalize.css/. Inspecione atentamente as declara^oes CSS, 
espccule consigo mesrao sobrc a finalidade de cada uma delas e acrescente mais 
esse conhecimento ao sen acervo profissional. 

A folha de estilos normalize.css foi incorporada dentro da folha de estilo do 
Bootstrap. Assim, voce nao precisa criar link para o arquivo normalize.css, pois eie 
ja consta da folha de estilo nativa do Bootstrap. 


2.3 Sistema de grid para layout 

Criar layout CSS baseado em um grid inicial e uma tecnica que surgiu cm 2007 e 
proporcionou o aparecimento de grids prontos, publicados por seus an tores, para 
uso pelos desenvolvedores web. Tais grids constituem os chamados frameworks 
CSS para criagao de layouts ou simplesmcnte grids CSS, e o Bootstrap se baseia 
em grid. 

Un^^los^smtemas^de^jJrk^CSS^jAoncUo^dentinnna-st^jUuejarint 

(http://www.blueprintcss.org/) e e usado ate hoje. Logo forarn lan^ados outros sis- 
temas, e atualmente existem dezenas deles, sendo que um dos mais conhecidos 
dos autores CSS e o sistema 960 Grid Sistem (http://960.gs/). 

Usar um framework baseado em grid para desenvolver layouts CSS e um assun- 
to polemico e nao e do escopo deste livro discutir a conveniencia ou enumerar 
aspectos negativos e positives do seu uso. No entendimento deste autor, dois 
aspectos sao indiscutrveis quando se trata de criar um layout baseado em grid 
versus a codifica^ao “a unha”: agiliza^ao do processo de cria^ao e possibilidade 
de usar as funcionalidades do grid de forma modular. 

A agiliza^ao do processo traz como beneficio imediato a redugao do tempo de 
trabalho para atingir o resultado final, e nos, desenvolvedores, sabemos muito 
bem como os prazos sao curtos. Um framework para cria^ao de layout bem pro- 
jetado e de natureza modular, ou seja, possibilita ao autor usar estritamente as 
funcionalidades especificas ao seu projeto, sem a necessidade de carregar arquivos 
desnecessarios. 


Dica: Uma das caracteristicas do Bootstrap e a sua natureza modular, materializada 
na existencia de uma interface grafica, no site do projeto, destinada a fazer o 
download personalizado do Bootstrap (http://getbootstmp.com/customize/). 
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O sucesso de um projeto web come^a corn um planejamento bem feiro no qual a 
escolha das ferramcntas c o detalhamento das fases do dcsenvolvimenro sao de 
importancia fundamental. Assim, usar um framework grid ou codificar “a unha” 
e uma decisao que cabe a equipe de dcsenvolvimento. 

Sem diividas, o inventor ou os inventores dos sistemas de grid CSS, tal como e 
conhecido atuaimente, tiveram um ideia brilhante e digna de admiragao, sem 
contar a enorme contribui^ao que fizeram ao desenvolvimento web colocando 
nas maos dos autores uma ferramenta extremamente poderosa, agil c facil de 
aprender, destinada a cria^ao de layouts CSS. Atuaimente, uma quantidade con¬ 
sider avel de sites foi desenvolvida com uso de grid CSS. 

O W3C lan<jou em abril de 2011 um Rascunho de Trabalho denominado Grid 
Layout, renomeado em 22 de margo de 2012 como CSS Grid Layout, descrevendo 
funcionalidades para criaqao de layouts baseados em grids. Essa especifica^ao esta 
no seu inicio de desenvolvimento e demandara algum tempo ate que possa ser 
usada em produ^ao. O curioso e que o Internet Explorer 10 e, desde dezembro de 
2012 , o unico navegador que implementou as funcionalidades previstas naquela 
especifica^ao, devendo-se usar o prefixo proprietario -ns- para declarar as regras 
CSS nela previstas. Posteriormente a especifica^ao alterou a sintaxe, mas o IE 
continua a dar suporte a sintaxe antiga. 

A ideia que inspirou o sistema de grid CSS e muito simples. Uma vez conhecido 
o mecanismo de funcionamento, somos imediatamente levados a fazer a classica 
pcrgunta a nos mesmos: “Como eu nao pensei nisso?” 

Grid significa malha e tecnicamente pode ser descrito como uma estrutura hi- 
dimensional formada por eixos (ou linhas retas) verticals e horizontais que se 
interceptam, criando uma estrutura de malha com celulas definidas pelas quatro 
interse^oes de eixos verticals com eixos horizontais. 

A diagrama^ao dos conteudos e a consequente cria^ao do layout se faz com uso 
dessa malha com suas celulas servindo de container para conteudos a diagramar 
(ou “layautar”). Celulas podem ser combinadas na horizontal e/ou na vertical de 
modo a criar containers de tamanhos diferentes. 

A tecnica de uso de grid em tipografia foi introduzida no curriculo academico 
da formagao de designers na metade dos anos 70 c comegou a ser usada para 
diagramar conteudos destinados a midia impressa. Somente por volta de 2007 
a tecnica foi usada para cria^ao de layouts CSS, e hoje em dia esta amplamente 
difundida nesta area. 
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A figura 2.1 mostra dois exemplos de estrururas de grids. 
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Grid 7x7 - simples Grid 7x7 - com espa^amento 

Figura 2.1 - Grids. 


2.4 Como e criado um grid CSS 

A marcagao HTML destinada a ser estilizada de forma a constituir um grid CSS 
e uma marcagao modulada e padrao na qual os elementos que constituent a es- 
trutura do layout sao definidos com uso de um atriburo cujo valor e previamente 
definido e serve como seletor CSS para dcfinir as celulas do grid, rais como definir 
celulas unitarias ou combinar celulas horizontais de modo a formar containers 
para o layout. 


2.4.1 Container geral 

Vamos examinar um exemplo pratico bem simples de criagao de grid com a fi- 
nalidade de entender o funcionamento basico das estruturas para grid. Observe 
a marcagao HTMLcontendo uma folha de estilo incorporada mostrada a seguir. 


Dica: Nos exemplos deste livro, quando for o caso, usaremos folha de estilo 
incorporada com a finalidade de facilitar a leitura e o entendimento dos codigos. 
Voce com certeza conhece e sabe quando, como e por que usar folhas de estilos 
externas. 


• HTML 

<1DOCTYPE htril> 
<htnl lang="pt-br"> 
<head> 
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<neta charset=''utf-8"> 

<title>Livro Bootstrap Haujor</title> 

<style> 

body { margin: 0; font: 100% sans-serif; } 
hi { font-size: 16®; } 

.container { width: 940px; nargin: 0 auto; background: #b5b5b5; } 

</ stylo 
</head> 

<body> 

<div class="container’s 

<hl>Heu prineiro grid - container geral</hl> 

</div> <!-- /.container --> 

</body> 

</html> 

[.../c2/g rid-basico-1.html] 

A marcagao HTML mostrada, estilizada conforme a folha de estilo nela incor- 
porada, cria um container gerai para urn grid CSS fixo com largura de 940px 
cenrrado na tela. 

A renderizaijao do arquivo anterior deve ficar conforme mostrado na figura 2.2. 



Figiira 2.2 - Container para um grid bdsico. 


2.4.2 Linha de celulas 

Vamos criar uma linha de celulas para nosso grid. Para isso precisamos definir 
quantas celulas colocaremos em uma linha e qual sera o espagamento entre elas. 
Escolhemos colocar em cada linha doze celulas separadas por 20px. Fazendo uns 
calculos simples, chegamos a conclusao de quc cada celula devcra ter 60px de 
largura, totalizando 60 x 12 = 720px, com um total de espa^os de 11 x 20 = 220px. 
Somando 720 + 220, obtemos os 940px do container do layout, “fechando” as contas. 
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Vamos transfer mar essas premissas era m area 910 HTML e CSS. A linha de celulas 
sera constituida pelo element© div.row e cada uma das celulas por um elemento 
div.spanl. Observe a seguir o acrescimo de marca^ao no HTML mostrado ante- 
riormente. 

• HTML 

1. <div class="container"> 

2. chWteu prineiro grid - Unha de celulas</hl> 

3. <div c1ass="row"> 

4. <div class="spanl">l</div> 

5. ediv class="spanl">2</div> 

6. <div class="spanl">3</div> 

7 . 

8. <div class="spanl">ll</(tiv> 

9. <div class="spanl">12</div> 

10. </div> <!-- /.row --> 

11. </div> <!-- /.container 

[,../c2/g rid-basico-2.html] 

Codigo comentado: 

Linha(s) Descri^ao 

Linhas 3 a 10 Elemento container div com a classe cujo valor e row e que sera o con¬ 
tainer das celulas. A tradu^ao da palavra inglesa “row” e linha. Esse 
container e uma linha de celulas do grid. 

Linhas 4 a 9 Doze elementos div com a classe cujo valor e spanl sao as doze celulas 
do grid. 

Para dispor uma linha contendo doze celulas, acreseentaremos na folha de estilos 
mosrrada anteriormente as declara^oes em destaque no codigo a seguir. 

• CSS 

1. <style tyep="text/css"> 

2. body { nargin: 0; font: 100% sans-serif; } 

3. hi { font-size: 160W; } 

4. .container { 

5. width: 940px; 

6. nargin: 0 auto; 

7. background: #b5b5b5; 

8 . } 
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9. .row { nargin-left: -20px; } 

1G. .spani { 

11. width: 6Qpx; 

12. float: left; 

13. nargin-left: 23px; 

14. background: #d5dSd5 

15 . } 

16. . row:after { /* tecnica nodema para clear floats */ 

17. content: 

18. display: table; 

19. line-height: G; 

2G. clear:both; 


21 .} 

22. </style> 

Codigo comentado: 


Linha(s) Descriqao 


Linha 9 
Linhas 11 
Linhas 12 

Linha 13 


Linha 14 
Linhas 16 a 21 


Ver explicagao na linha 13. 

Define a largura de cada celula. 

Flutua as celulas a esquerda, tirando-as da sua posigao vertical padrao 
e coiocando-as em linha ao lado da outra. 

Define um espagamento de 20px a esquerda para cada celula. Note que 
essa declaragao fara com que a primeira celula da linha seja deslocada 
para a direita. Para recoloca-la em sua posigao, declaramos uma margem 
negativa de 20px para o container da linha, como mostrado na linha 

9. 

A cor de fundo Kd5d5d5 visa apenas a facilitar a visualizagao do grid 
criando contraste com a cor do container geral SbSbSbS (ver linha 7). 

Uma vez que as celulas div.spani foram flutuadas dentro do seu con¬ 
tainer div.row, esse nao se estende na vertical, assumindo altura zero. 
E o classico comportamento de containers com floats. Para estender o 
container, precisamos declarar regras CSS para fazer o conhecido clear 
floats. Nesse exemplo, adotamos a moderna tecnica clear floats sem uso 
de marcagao. 


A marcagao HTML mostrada, estilizada confer me os acrescimos das regras CSS 
apresentadas, cria uma linha de doze celulas conforme a proposta de layout. 

A renderizagao do arquivo anterior deve ficar conforme mostrado na figura 23. 
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Figura 2.3 - Grid bdsico, linha de celulas. 


2.4.3 Unindo celulas 

Aproxima funcionaiidade quc o sistema de grid proporciona, c que estudareinos 
a seguir, e a possibilidade de unir duas ou mais celulas adjacentes para formar 
colunas. Por exemplo: unindo-se sucessivamente quatro celulas adjacentes, po- 
demos criar uina linha composta de tres colunas. 


Alerta: A parti r daqui, vamos retiomear o que ate aqui chamamos de celula. 
Em grids CSS, as chamadas celulas, hem como o resultado da uniao de celulas 
adjacentes, denominam-se colunas. Assim, no exemplo inostrado na figura 23, 
ternos 12 colunas. 


Vamos exempli hear a uniao de celulas do grid tomando como objetivo a criagao 
de uma estrurura de layout de duas colunas. 

Uma coluna esquerda para o conteudo principal e uma coiuna direita para o con- 
teudo auxiliar, tais como navegaqao, parceiros etc. E nossa inten^ao que a coluna 
principal ocupe 2/3 da largura total da aplica^ao (era nosso exemplo, 940px), e 
a coluna de navega^ao, 1/3 daquela largura. 

Observe os acrescimos e as modihea^oes na marca^ao HTML. 

• HTML 

1. <div class="container"> 

2. <hl>Heu prineiro grid - ertando colunas</hl> 

3. <div class='’row's 

4. <div class="span8"><K2>Coluna principal</h2x/div> 

5. <div class="span4"xh2>Coluna auxiliar</h2x/div> 

[.../c2/g rid-basico-B.html] 
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Codigo comentado: 

Linha(s) Descriqio 

Linhas 3 e 10 Essas linhas definem o inicio e o final do container das celulas de uma 
linha do grid. Note que os elementos-filhos desse container sao dois 
elementos div em lugar dos doze elementos div .spanl que tinhamos no 
exemplo anterior. 

Linhas 4 e 5 Os dois elementos div, na linha, criam as colunas principal e auxiliar. 

Note que o valor do atributo class desses div termina com um numero 
(spans e span4). Esses dois numeros somados resultam em 12. Como voce 
ja deve ter concluido, o numero no valor do atributo define o numero 
de celulas a serem combinadas para formar a coluna. 

O terrno span em ingles, no presente contexto, pode ser traduzido para unir, abarcar 
ou abranger. Assim div.spanS deve ser lido como: um clemento div que une oito 
celulas do grid para criar o container de uma coluna do layout. 

Para criar as duas colunas do layout, modificaremos e acrescentaremos na folha 
de estilos mostrada anteriormente as declara^oes em destaque no codigo a seguir. 

• CSS 

1. <style type="text/css"> 

2. body { margin: 0; font: 10014 sans-serif; } 

3. hi { font-size: 16054; } 

4. .container { 

5. width: 940px; 

6. margin: 0 auto; 

7. background: #b5b5b5; 

8 . } 

9. .row { margin-left: -20px; } 

10. .sp a nl { 

44i- width; 6 0px; 

±?r. - f l o a t; l e f t ; 

Hh- m a rgin - l e ft i 2@px; 

±4i- b a ckground; # d5d5d5 

16. .row:after { 

17. content: 

18. display: table; 

19. line-height: 0; 

20. clear:both; 

21 . ) 
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22. [class*="span"] { 

23. float: left; 

24. nargin-left: 20px; 

25. background: #d5d5d5 

26. } 

27. .span4 { width: 309px; } 

28. .spans { width: 620px; } 

29. </stjile> 

Codigo comenrado: 


Linha(s) Descrigao 


Linhas 10 a L5 


Linhas 22 a 26 


Linha 27 


Linha 28 


A declara^ao da largura para cada seletor span* devera ser feita em 
regra CSS separada, assim a regra CSS contida nessa linha que declara 
valores para o seletor spanl sera substituida por outras regras mostradas 
a seguir. 

Os valores CSS comuns a todos os seletores do tipo span* sao aqui de- 
clarados. O seletor [class*= "span"] aplica-se a todos os elementos cujo 
valor do atributo class seja uma palavra que comeqa com span (vale 
para spanl, span2, span3, span4 etc.). 

Aqui se define a largura da coluna formada pela uniao de quatro celu¬ 
las. A largura e obtida somando-se as larguras das celulas (60px) com 
a largura dos espacamentos entre elas (20px), ou seja, 4 x 60px + 3 x 
2Qpx = 300px. 

Aqui se define a largura da coluna formada pela uniao de oito celulas. 
A largura e obtida somando-se as larguras das celulas (60px) com a 
largura dos espacamentos entre elas (20px), ou seja, 8 x 60px + 7 x 
20px = 620px. 


A marcacao HTMLmostrada, estilizada conforme os acrcscimos e as modificanoes 
nas regras CSS mostradas, cria as duas colunas conforme proposto anteriormente. 

A renderizaijao do arquivo anterior deve ficar conforme mostrado na figura 2.4. 


f B Irvro-blaofcstrnp,Iocafrrortfcodig d:■ ■'c2-'grid basicc-Mitm! 


G A, Pesquxar -§■ 4 # 6 1 © = 


Meu primeiro grid - criando colunas 


Coluna principal 

Coluna auxiliar 




Figura 2.4 - Grid bdsico, criando colunas. 
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Para contemplar todas as possibilidades de combinagao de uniao de celulas, a 
folha de estilos do grid devera conrcr as seguintes declara^oes CSS: 

• CSS 

.spanl { width: 60px; } 

.span2 { width: 140px; }/* 2x60 + 1x20 */ 

.span3 { width: 220px; }/* 3x60 + 2x20 */ 

.span4 { width: 300px; }/* 4x60 + 3x20 */ 

.spans { width: 380px; }/* 5x60 + 4x20 */ 

.spans ( width: 460px; }/* 6x60 + 5x20 */ 

.span7 { width: 540px; } /* 7x60 + 6x20 */ 

.spans { width: 620px; }/* 8x60 + 7x20 */ 

.span9 { width: 700px; }/* 9x60 + 8x20 */ 

.spanlO { width: 780px; }/* 10x60 + 9x20 */ 

.spanll ( width: 860px; }/* 11x60 + 10x20 */ 

.spanl2 { width: 940px; }/* 12x60 + 11x20 */ 

2.4.4 Criandoum rodape 

Para criar um rodape em nosso sistema de grid basico, basta declarar na marea^ao 
HTML uma nova linha div.row que se estenda por toda a largura do container do 
grid div.container. O acrescimo de marcagao HTML e de regra CSS e mostrado, 
em destaque, a seguir. 

• HTML 

1. <div class="container"> 

2. <hl>Heu primeiro grid - criando rodape</hl> 

3. <div class="ra\i"> 

4. <div class="span8 l[ ><h2>Coluna principal</h2x/div> 

5. <div class="span4''><h2>Coluna auxiliar</h2x/div> 

10. </div> <!-- /.row das colunas --> 

11. <div class="row"> 

12. <div class="spanl2"xh2>Rodape</h2></div> 

13. </div> <!-- /.row do rodape --> 

14. </div> <!-- /.container --> 

[.../c2/g rid-basico-4.html] 
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.spani2 { width: 940px; background: SeSeSeS; } /* Acrescind na folha de estilo anterior 

*/ 


Alerta: No arquivo para esse exemplo define-se uma cor de fundo para a linha do 
rodape com a finalidade de destacar visualmente sua posi^ao. 


A renderiza<jao do arquivo anterior deve ficar conforme mostrado na figura 2.5. 



Figura 2.5 - Grid basico, criando rodape. 


2.4.5 Aninhando conteudos 

Outra funcionalidade do sistema de grids para layout e a possibilidade de ani- 
nhar colunas dentro de colunas. Suponha que desejainos criar dentro da coluna 
principal tres blocos de conteudos em linha, ou scja, na horizontal. O acrescimo 
de marca^ao HTML e de regra CSS c mostrado a seguir. 

• HTML 

1. <div class="container"> 

2. chWleu prineiro grid - aninhanento de colunas</hl> 

3. <div class="row"> 

4. <div class=”span8"> 

<h2>Coluna principal</h2> 

<div class="row"> 

<div class="span2" style="background: #f5f5f5;"> 

<p>Conteudo aninhado a esquerda</px/div> 

<div class="span3" style="background: #f5fSf5;"> 

<p>Conteudo aninhado no centro</px/div> 

<div class="span3" styU="background: #f5f5f5;"> 
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<p>Conteudo aninhado a direita</px/div> 
</div> <!-• .raw dos conteudos aninhados--> 
</div> <!-- /.span8 coluna principal --> 

5. <div class="span4"><h2>Coluna auxiliar</h2x/div> 

[.../c2/g rid-basico-5.html] 

• CSS 

.span2 { width; 140px; } /* Acrescino na fclha de estilo anterior */ 
.span3 { width; 220px; } /* Acrescino na folha de estilo anterior */ 


Alerta : No arquivo para esse exemplo define-se uma cor de fundo, com CSS inline, 
para os conteudos aninhados, somente com a finalidade de destacar visualmente 
sua posi^ao. 


A render izaf^ao do arquivo anterior deve ficar conforrne mostrado na figura 2.6. 



Figura 2.6 - Grid basico, aninhamento de conteudos. 

Note que, sendo o container dos tres blocos de conteudos a coluna principal que 
e formada pela uniao de oito celulas, temos disponivel, para criar os blocos, estas 
oito celulas. For essa razao, optamos, em nosso exemplo, pelo primeiro bloco, que 
foi resultado da uniao de duas celulas, e o segundo e o terceiro, de tres celulas. 

Assim, cabe a pergunta: e se precisarmos de tres blocos com larguras iguais? 
Com oito celulas disponiveis, temos duas possibilidades para mtiltiplos de tres: 
unir seis celulas duas a duas e distribuir as duas celulas restantes entre as tres 
ou tomar uma celula tres vezes distribuindo as cinco celulas restantes entre elas. 

Em ambos os casos, teriamos que criar regras CSS personalizadas. 
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2.4.6 Semantica 

Conforme foi visto, os conceitos da constru<;ao de layouts baseados era sistema 
de grid se fundamentam era uraa marcagao HTML com sua estrutura geral 
padronizada, na qual os nomes dos atributos class sao predefinidos e servem 
de referenda para estabelccer regras CSS destinadas a posicionar e formatar os 
diferentes eiementos do layout. 

Voce deve estar se perguntando: O layout e todo construido com eiementos div? 
E a semantica? A resposta e: desde que voce preserve os atributos c seus valorcs 
predefinidos, use o elemento que voce quiser era substituigao ao eletnento div. 
Mas lembre-se de que os eiementos substitutes devem ser declarados no nivel de 
bloco, como sao os eiementos div substiruidos. 

Observe o arquivo constante do item [2.4.7] reescrito de forma semantica: 

• HTML 

1. <div class= "container":* 

2. <header> 

3. <hl>fleu priroeiro grid - senantica</hl> 

4. </header> 

5. <div claSS^'rOW":* 

6. ^section class="spans"> 

7. <header> 

S. <h2>Coluna principal</h2> 

9. </header> 

10. <div €1355="™% 

11. <div class="sp3n2" style="background: #f5f5f5;"> 

<p>Conteudo aninhado a esquerda</px/div> 

12. <div cl3ss=' r span3" style= "background: #f5f5f5;"> 

<p>Conteudo aninhado no centro</px/div> 

13. <div cl3ss=' r span3" style="background: #f5f5f5;"> 

<p>Conteudo aninhado a direita</px/div> 

14. </div> <!-- .row dos conteudos aninhados--> 

15. </section> <1-- /.spans coluna principal --> 

16. caside class="span4"xh2>Coluna auxiliar</h2></aside> 

17. </div> <!-- /.row das colunas --> 

18. <div class="row"> 

19. <footer class="spanl2"xh2>Rodape< / h2x/foote r > 

20. </div> <!-- /.row do rodape --> 

21. </div> <!-- /.container --> 

[.../c2/g rid-basico-6.html] 
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O fa to e que cm projetos complexos a solugao semantica proposta neste simples 
exemplo sera inviavel, e a verdade e que autores tern proeurado solucionar esre 
problema propondo algumas altemativas, tais como a criagao de nomes de classes 
semanticos a serem processados por SASS ou LESS e outras, mas nao existe uma 
solugao semantica a toda prova, e este e um problema ainda nao solucionado, 
comum a grande maioria dos frameworks CSS. 

As versoes anteriores ao IE9 do Internet Explorer nao reconhccem os novos 
elementos da HTML5, por isso e necessario usar um script para forgar aqueles 
navegadores a recon hecer e estilizar tais elementos. Quando for o caso, nos exem- 
plos deste livro, lincaremos para um script SHIM hospedado no CDN do Google, 
como mostrado no codigo a seguir. 

<head> 

<[if It IE 9]> 

<script src="http: //htmlSshin. googlecode. con/svn/trunk/htnl5. js"x/script* 

<![endif]--> 

</head> 


Dica: Existem outros scripts que cumprem a mesma funcao, tal como o Modernize 
Use o de sua preferencia e conforme as suas necessidades. 


2.4.7 Espa^ando colunas 

No grid do nosso exemplo, tal como no Bootstrap, o espagamento-padrao entre co¬ 
lunas e de 20px, contudo existe uma funcionalidade que permite ao autor aumentar 
esse espagamento, fazendo com que uma ou mais colunas sejam incorporadas para 
definir o espa^amento. Por exemplo: considerando as doze colunas iniciais do grid, 
e posslvel construir uma coluna a esquerda com sete celulas e outra a direita com 
tres celulas e com um espagamento entre elas de —12 - (3 + 7) = 2 — duas celulas 
(180px). Na figura 2.7, ha o diagrama que ilustra essa configuragao. 


Bootstrap - es pagan do colunas 


6Qpx 


20px 7x60 + 6x20 = 54Qpx 


! ! 
I I 


i i 
I I 
! I 
I I 

i a 


■ i 

■ i 
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2x60 + 3x20 = 180px 


* i 


t i 
i i 


3x60 + 2x20 = 220px 


Figura 27 - Diagrama de espagamento de colunas * 
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Quando usarnos colunas para obrer espagamento, em ambas as extremidades do 
espagamento e adicionado o espagamento-padrao de 20px, dai, em nosso exemplo, 
no qual usamos duas colunas para espagar, temos urn espagamento total de 2x60 
+ 3x20 = 180px, como mostrado na figura 2.7. Por outro lado, a uniao de colunas 
para for mar uma coluna de largura maior nao inclui os espagamentos-padrao 
nas extremidades* 

A marcagao HTML e as regras de estilo esperificas para criar o layout proposto 
no diagram a sao mostradas a seguir. 

• HTML 

<1DOCTYPE htnl> 

<htnl lang="pt-br"> 

<head> 

<neta charset=’'utf-8"> 

<title>Livro Bootstrap Maujor</titles 
<style type="text/css"> 

/* regras de estilo conforne exenplos arteriores */ 

.span3 { width: 220px; } 

.span7 { width: 540px; } 

.offset2 { nargin-left: lSGpx; } /* classe define largura do espaganento */ 

</styles 
</head> 

<body> 

<div class="container"> 

<hl>Bootstrap - espa?ando colunasc/hls 
<div class="row"> 

<div class="span7' 1 > 

<h2sColuna principal</h2s 
</div> <!-- .span7 
<div class="span3 offset2"> 

<h2>Coluna auxiliar</h2> 

</div> <!-- .span3 --> 

</'div><! - - /.row --> 

</div> <!-- /.container --> 

</body> 

</htnl> 

[.../c2/espaca ndo-colunas.html] 
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A renderiza^ao do arquivo anterior deve ficar confer me mostrado na figura 2.8. 



Figura 2.8 - Espa$ando colunas. 

Para unir colunas do grid e transforma-las em espagamentos, o nosso exemplo 
definine o valor offset* para o atributo class. Esse valor termina com urn numero 
que define o numero de colunas a unir para criar o espagamento. Dessa forma, 
offset3 une tres colunas, offset7 une sete colunas, e assim por diante. As regras CSS 
que se aplicam a esses valores de classe sao mosrradas a seguir. 


• C5S 


.offsetl { margin-left: 
.offset2 { margin-left: 
.offset3 { margin-left: 
.offset4 { margin-left: 
.offsets { margin-left: 
.offsets { margin-left: 
.offset7 { margin-left: 
.offsets { margin-left: 
.offset9 { margin-left: 
.offsetlO ( margin-left: 
.offsetll [ margin-left: 


lOOpx; } 
180px; } 
260px; } 
340px; } 
420px; } 
500px; } 
SSOpx; } 
660px; } 
740px; } 
820px; } 
900px; } 


Note que o espagamento e definido atribuindo-se uraa margem esquerda para 
a coluna. Assim, devemos declarar o valor offset* para o atributo class contido 
no elemento que cria a coluna a direita do espa^amento. Em nosso exemplo, o 
elcmento div que cria a coluna auxiliar. 


2.5 Grid fluido 

Todos os exemplos mostrados ate aqui for am criados de modo a obter um grid 
fixo com 940px de largura centrado na tela. Para obter um grid fluido basta de¬ 
clarar os valores das larguras em porcentagens. 
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2.6 Grid responsivo 

Para obter um grid responsivo basta deciarar uma metatag apropriada e criar 
regras CSS com uso das media queries. 


2.7 Condusao 

Neste capitulo, estudamos os fundamentos de cria^ao e funcionamento de grids 
CSS. O Bootstrap e um grid CSS bem mais complexo que o mostrado neste capi- 
tulo, mais os principios aqui mostrados sao validos para o entendimento do seu 
funcionamento cstrutural. 
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Neste capitulo estudaremos os padroes basicos de estiliza^ao adotados pelo Boots¬ 
trap. Examinaremos as regras CSS padrao para o grid do Bootstrap, tipografia, co- 
digos e blocos de codigos. Veremos com detalhes as difcrenres formas de estilizagao 
de tabelas, as funcionalidades CSS para apresenta^ao de formularios, a cole^ao de 
botoes pre-estilizados e prontos para uso na interface a projetar, Estudaremos os 
trcs tipos de estiliza^ao para apresenta^ao de imagens e para finalizar o capitulo 
veremos quais sao e como utilizar os leones padrao fornecidos pelo Bootstrap. 


3.1 Grid 

O grid e a espinha dorsal de qualquer framework CSS. E ele que determina o 
posicionamento de cada elemento em uma pagina, sendo assim usado para cons- 
truir o layout. Um solido conhecimento das marca^oes HTML padrao disponivcis 
para estruturar layout e o primeiro requisito para se aprender a usar o Bootstrap. 
Ao construir um layout, por mais complexo que elc seja, e necessano saber quais 
sao os elementos, classes, atributos e estruturas de marcaijao do grid usar. E, tao 
importante e fundamental quanto os elementos HTML sao os atributos a serem 
declarados na marca^ao, pois sao eles que servirao de referenda para que a folha 
de estilo padrao do Bootstrap aplique as regras CSS previstas para criar os dife- 
rentes componentes e widgets padroes do Bootstrap. 

Portanto, desde ja, a exemplo do que estudamos no capitulo 1, esteja ciente de 
que um sistema de grids se baseia em marca^ao predefinida e nomes de atributos, 
notadamente o atributo class tambem predefinidos. 
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3.1.1 Introduce 

Uma aplica^ao desenvolvida com Bootstrap deve estar cm conformidade com 
algumas premissas mandatorias con forme descritas a seguir. 

* Estar contida cm um elemento div container geral que recebe a classe de 
nome container conforme mostrado a seguir. 


<body> 

<div class="container"> 

<!-- Aplicafao criada con Bootstrap --> 

</div> <1-- /.container --> 

<body> 

<htnl> 

Opcionalmente, para obter um layout fluido (layout que preencha toda a largura 
da tela) o nome de classe container deve ser substituido por container-fluid. Nao se 
preocupe com este nome, adiante neste livro, veremos como usar e quais sao os 
efeitos de se usar, alternativarnente, este nome. 


3.1.2 Breakpoints 

As CSS do Bootstrap for am desenvolvidas seguindo as premissas da filosofia 
“mobile first” Isto significa que as regras de estilo iniciais foram criadas para 
contemplar um layout de uma coluna no qual os blocos de conteudos vao sendo 
posicionados na vertical um apos outro e suas larguras ocupam todo o espa^o 
disponivel em dispositivos moveis, com viewports de largura menor do que 768px. 

Para fins didaticos denominaremos, neste livro, as regras CSS para dispositivos 
com viewport menor do que 768px de regras CSS iniciais. Os criadores do Bootstrap 
estabeleceram que por padrao o primeiro breakpoint fosse em 768px. 

Apartir da largura de viewport igual a 768px, usando-se media queries foi criado 
um conjunto de regras CSS a serem aplicadas juntamente com as regras CSS iniciais. 

Os criadores do Bootstrap estabeleceram que por padrao o segundo breakpoint 
fosse em 992px e usando-se media queries foi criado um conjunto de regras CSS 
a serem aplicadas juntamente com as regras CSS anteriores. 
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Os criadores do Bootstrap estabeleceram que por padrao o terceiro breakpoint 
fosse cm 1200px e usando-se media queries foi criado um conjunto de regras 
CSS a serem aplicadas juntamente com as regras CSS anteriores para larguras de 
viewport maiores do que 1200px. 

Assim, em um layout criado com uso do Bootstrap, por padrao, e possivel que se 
defina ate quatro acomodagoes do layout de acordo com a Largura da viewport. Em 
design responsivo ha um prindpio que diz que quern determina os breakpoints 
e o layout e nao a largura dos dispositivos. Assim sendo nao se deve estabelecer 
breakpoints “a priori”. 

O Bootstrap estabelece quatro breakpoints e na maioria dos casos eles atenderao 
seu layout. Se ajustes fore in necessarios com mudanga, ou mesmo criagao de novos 
breakpoints o autor podera criar regras de estilo complementares ou mesmo usar 
LESS do Bootstrap para processar uma nova folha de estilo personalizada. Neste livro 
vamos desenvolver nossos exemplos considerando os quatro breakpoints mostrados. 

Para cada faixa de comportamento do layout de acordo com os breakpoints 
esta prevista uma largura maxima para o container geral da aplicagao conforme 
mostrado a seguir. 

• Ate 768px a largura tera o valor CSS auto. 

• Entre 768px e 992px a largura maxima e igual a 750px. 

• Entre 992px e 1200px a largura maxima e igual a 970px. 

• Acima de 1200px a largura maxima e igual a 1170px. 


3.1.3 Linhas do grid 

Criam-se linhas do grid com um elemento dtv que recebe a classe de nome row 
conforme mostrado a seguir, para criar duas linhas. 

<div class= "container ”> 

<div class="row"> <!-- Linha --> 

<!-- Colmas --> 

</div> <!-- /.raj --> 

<div class="row"> <!-- Linha --> 

<!-- Colmas --> 

</div> <!-- /.row 
,/div> <1-- /. container --> 
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* Dentro do elemento div que cria uma linha (div.row) insere-se como 
elemento-filho elementos para criar colunas. Colunas, formadas por ce- 
lulas ou constituida de uma celula somente, sao criadas com uso de um 
elemento div que rccebe um ou mais atributos e cujo atributo classe tern 
valor cujo formato geral e col-xs-*, col-sm-*, col-nd-* e col-lg-*, sendo o sinal 

• um numero de 1 a 12 que define a quantidade de celulas que formam a 
coluna. O numero 12 e, por padrao, o numero maximo de colunas cm uma 
linha. E possivel unir celulas (cada uma das 12 colunas de uma linha) com 
a finalidade de se obter colunas com Jargura maior. Uma linha pode conter 
qualquer combina«;ao de colunas desde que o numero maximo de celulas 
nao ultrapasse a 12, podendo ser menor. A finalidade de cada um dos valores 
de classe para os div containers das celulas e confer me explicado a seguir. 

• col-xs-* - Tele/ones; define colunas para dispositivos com viewport extra 
pequena (menor que 768px). 

• col-s n-*—Tablets; define colunas para dispositivos com viewport pequena 
(de 768px ate 991 px). 

• col-nd-* - Desktop medio ; define colunas para dispositivos com viewport 
media (de 991 px ate 1199px). 

• col-lg-* - Desktop largo ; define colunas para dispositivos com viewport 
larga (maior que 1199px). 

Se for definido para uma linha um numero de colunas cuja soma total de celulas 
ultrapasse a 12, cada grupo de colunas a mais sera posicionado a seguir no fluxo, 
tal como, se houvesse uma “quebra de linha”. 

Caso contrario, se for definido para uma linha um numero de colunas cuja soma 
total de celulas seja menor do que 12, o grupo de celulas em falta sera posicionado 
a direita e nao recebera conteudos. 


3.1.4 Colunas do grid 

Conhecendo quais sao os breakpoints padrao do Bootstrap varnos examinar 
novamente os valores de classes para definir colunas, mostrados no item anterior. 
Cada uma das quatro classes mostradas se destina a aplicar, as regras de estilo 
previstas para urn breakpoint, no elemento ao qual ela classe for definida. 
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3.1.4.1 Fundamentos 

O entendimento das premissas relacionadas a scguir e fundamental para uma perfeita 
compreensao e consequentemente uso correto e apropriado das classes destinadas a 
cria^ao de colunas. Conforme mostrado anteriormente os valores do atributo classe 
do container das colunas sao os seguintes: col-xs-*,col-sn-*, col-nd-*, col-lg-*. 

• Quaisquer que sejam os valores de classe definidos para urn container 
de colunas, quando a largura da viewport for menor do que768px serao 
aplicadas, no container, as regras de estilo iniciais. 

• Se nao for definido um valor de classe para o container da coluna as regras 
de estilo aplicadas ao container serao as regras de estilo iniciais, ou seja, 
aquelas para viewport menor do que 768px (mobile-first) e o layout tera 
comportamento mobile ern todas as larguras de viewport. Entao, para que 
serve col-xs-*? Para sobrescrever o comportamento colunar cm viewport 
menor do que 768px, permitindo, por exemplo, que se crie um layout de 
duas, ou mais colunas ein larguras de viewport menores do que 768px. 

• Se for definido somente o valor col-sn-* o container tera o comportamento 
colunar em larguras de viewport menores que 768px e outro em maiores. 

• Se for definido somente o valor col-nd-* o layout tera o comportamento 
colunar em larguras de viewport menores que 992px e outro em maiores. 

• Se for definido somente o valor col-lg-* o layout tera o comportamento 
colunar em larguras de viewport menores que 1200px e outro em maiores. 

• O efeito de se definir dois ou mais valores de classe faz com que o compor¬ 
tamento do layout varie de acordo com os valores de classe definidos e os 
respectivos breakpoints. 

Vejamos alguns exemplos p rati cos que ilustram a cria^ao de colunas em diferentes 
situates. 

Exemplo 7 

• CSS - Coloca uma cor de fundo e uma borda nas colunas com a finalidade de 

facilitar a visualiza^ao. 

.row div[class A ="col-"] { 
background: ttfafafa; 
border:lpx solid #ccc; 

} 
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<div class="container"> 

<div class="row"> 

<div class="col-nd-l ,, >.col-nd-l</div> 

<div class="col-nd-l">.col-nd-l</div> 

<!- repete 9 vezes --> 

<div class="col-nd-l">.col-nd-l</div> 

</div> <!-- /.row --> 

<dtv class="row"> 

<div class="col-nd-8">.col-nd-8</div> 

<div class="col-nd-4">.col-nd-4</div> 

</dlv> <!-- /.raj --> 

<dlv class="row"> 

<div class="col-nd-4">.col-nd-4</div> 

<div class=”col-nd-4">.col-nd-4</div> 

<di v class="col-nd-4">.col-nd-4</div> 

</div> <!-- /.raj --> 

<div class="row"> 

<di.v class="col-nd-6">.col-nd-6</div> 

<div class=”col-nd-6">.col-nd-6</div> 

</div> <!-- /.raj —> 

</div> <1-- /.container --> 

[.../c3/dasses-para-criar-co!unas.html] 

Neste exemplo usou-se o valor de classe col-nd-* para obter uni layout destinado 
a dispositivos moveis (tclefones e tablets) em viewport abaixo de 992px e outro 
para desktop em viewport acirna de 992px. 

Observe na figura 3.1 o resultado da aplica^ao da classe col-nd-* em diferentes 
larguras de viewport. Mostramos na figura a largura maxima padrao definida 
pelo Bootstrap para o container geral da aplicagao (div.container) para diferentes 
larguras de viewport. 


Conheca os livros do Maujor: http://livrosdomaujor.com.br 


60 


Boostrap 3.3.5 
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Figura 3.1 - Classes para criar colunas. 

Esse exemplo pratico demos tra a aplica^ao de classe para criagao de colunas e 
encontra-se disponivel para consulta online. 


3.1.4.2 Numero maximo de colunas em uma linha 

Sabcmos que o mirncro maximo de celulas em uma linha e 12 c ja dissemos que 
se um numero maior de celulas for declarado para uma linha, as celulas a mais 
serao posicionadas abaixo como se existisse uma “quebra de linha” No exemplo a 
seguir mostramos a marcaqao para uma linha que comprova este comportamento. 

• CSS 

.row div[class A ="col-"] { 
background: Hfafafa; 
border: Ipx solid #ccc; 

} 

.row { border: 2px dotted black; } 


Conheca os livros do Maujor: http://livrosdomaujor.com.br 

























































































Capituio 3 ■ CSS 


61 


• HTML 

<div class= "container Ir > 

<div class="row"> 

<div class="col-xs-6">6</di v> 

<div class="col-xs-4”>4</di v> 

<div class="col-xs-5">5</div> 

<div class=”col-xs-3">3</div> 

<div class="col-xs-7">7</div> 

</div> 

</div> <1-- /.container --> 

[.../c3/numero-maximo-eolunas-em-linha.html] 

Neste exeraplo definiu-se uma linha com um numero total de celulas igual a 25 
celulas, 

Foi incorporada ao documento uma folha de estilo adicional para aplicar cor de 
fundo e borda em cada coluna e uma borda pontilhada na linha com a finalidade de 
facilitar a visualiza^ao do resultado. Observe na figura 3.2 a rendcrizagao da linha. 



6 



4 

| 


5 


3 




~Y~ 






Figura 3.2 - Numero maxima de colunas em uma linha. 

Notar que a soma das celulas das tres primeiras colunas e 6+4+5 = 15 > 12. Assim 
as duas primeiras colunas 6+4=10<12 sao acomodadas e a terceira coluna vai 
para baixo. 

A soma celulas das tres ultimas colunas e 5+3+7 = 15 > 12 e o processo se repete. 

Notar que o espa^o que “sobra” em cada hleira e igual ao numero de celulas que 
faltam para completar 12 na fileira. 

Esse exemplo pratico demostra o comportamento das colunas quando se declara 
mais de 12 colunas em uma linha e encontra-se disponivel para consulta online. 


Conheca os livros do Maujor: http://livrosdomaujor.com.br 




62 


Boostrap 3.3.5 


3.1.4.3 Espa^ando colunas 

O Bootstrap preve valores para o atributo classe do tipo col- xs -offset-*, 
col-sn-offset-*,col-nd-offset-*, col -Ig- off set-* nos quais o sinal * c um numero inteiro 
de 1 a 11. Estes valores se destinam a criar um espagamento a esqucrda da coluna. 
O numero de celulas que define a largura do espa^amento e computado na soma 
do total de celulas que cabem era uma linha, que como ja vimos e 12. Observe o 
exemplo a seguir que mostra o espa^amento entre colunas era tres linhas diferentes. 

• CSS 

.row div[class A ="col-"] { 
background: ttfafafa; 
border:lpx solid #ccc; 

} 

.row { nargin-bottom: 5px; } /* separa linhas para facilitar visualiza^ao */ 

• HTML 

<div class= "container Ir > 

<div class="row"> 

<div class=' , col-nd-3">3</div> 

<div class="col-nd-2 col-nd-offset-3">2</diw> 

<div class=”col-nd-l col-nd-offset-3">l</diu> 

</div> <!-- /.row --> 

<div class="row"> 

<div class='’col-nd-S col-nd-offset-2">5</div> 

<div class="col-nd-3 col-nd-offset-1">3</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class="col-nd-8 col-nd-offset-2">8</div> 

</div> <!-- /.raj --> 

</'div> <1-- /.container --> 

[.../c3/espaca ndo-col imas.html] 

Neste exemplo as tres linhas foram definidas com espa$amento entre colunas 
confer me descrito a seguir. 

Na primeira linha temos uma coluna com tres celulas a seguir uma coluna com 
duas celulas com um espagamento de tres celulas a esqucrda e a seguir uma 
coluna com uma celula com um espagamento de tres celulas a esquerda. A soma 
total de celulas e 12. 
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Na segunda linha temos uma coluna com cinco celulas com um espa^amento 
de duas celulas a esquerda, a seguir uma coluna com quatro celulas com um 
espa^amento de uma celula a esquerda. A soma total de celulas e 12. 

Na terceira linha temos uma coluna com oito celulas com um espa^amento de 
duas celulas a esquerda perfazendo um total de 11 celulas na linha. Notar que o 
espaqo de uma celula que falta para totalizar as 12 celulas na linha e posicionado 
a direita na linha. 

Foi incorporada ao documento uma folha de estilo adicional para aplicar cor de 
fundo e borda em cad a coluna e uma margem entre linhas com a finalidade de 
facilitar a visual iza^ao do resultado. Observe na figura 33 mos a renderiza^ao 
dos espa^amentos nas tres linha. 


3 

espapo de 3 celulas 

2 

de 3 celulas 

1 

aspapo de 2 celulas 

5 



espapo de 
i celula 

4 


gfe 2 celulas 


3 


"SObriT 



espapD de 2 celulas 


Figura 33 - Espa^ando colunas. 

Esse exemplo pratico demostra cotno criar espagamento entre colunas e encontra- 
-se disponivel para consulta online. 

3.1.4.4 Aninhando colunas 

E valido aninhar colunas em tantos niveis quando se queira. Para aninhar colunas 
basta que se crie linhas dentro de colunas existentes. Neste caso as linhas criadas 
conterao colunas aninhadas na coluna onde a linha foi criada. No exemplo a se¬ 
guir em uma linha com duas colunas, uma com oito celulas e outra com quatro 
celulas aninhou-se na primeira coluna uma linha com 3 celulas e na segunda 
uma com duas celulas. 

• CSS 

.row div[class A ="col-"] { 
background: (tfafafa; 
border:lpx solid #ccc; 
font-size: 30px; 
font-weight: bold; 
padding-top: lOpx; 
padding-bottom IGpx; 
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} 

.row .row > di.v[class / '="col-''] { 
background: (tflflfl; 
border:lpx solid ttblack; 
font-size: 20px; 
font-weight: bold; 

} 

• HTML 

<div class="container 1 ^ 

<div class="row"> 

<div class=”col-nd-8'’> 

8 

<div class="row"> 

<div class= f ’col-nd-2”>2</div> 

<div class="col-nd-7">7</div> 

<div class= r, col-nd-3">3</div> 

</div> <!-- /.row --> 

</div> 

<div class=”col-nd-4"> 

4 

<div class="row"> 

<div class= r ’col-nd-6">6</div> 

<div class= , ’col-nd-6 , ’>6</div> 

</div> <!-- /.row --> 

</div> 

</div> <!-- /.row 
</div> <1-- /.container --> 

[.../c3/aninhando-coiunas.html] 

Neste exemplo as tres linhas for am definidas com espa^amento entre colunas. 

Foi incorporada ao documento uma folha de estilo adicional para aplicar cor de 
fundo e borda em cada coluna com a finalidade de facilitar a visualiza^ao do 
resultado. 

Observe na figura 3.4 a renderizagao das colunas aninhadas, 

Esse exemplo pratico demostra como aninhar colunas e encontra-se disponivel 
para consulta online. 
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Figura 34 - Amnhando colunas. 


Dica: Norar que para o grid do Bootstrap o aninhamento de colunas se faz de 
raodo a que o numero maximo de colunas aninhadas seja sempre igual a doze, 
independentemente do nivel de aninhamento, pois a largura das celulas e defmida 
em porcentagem. 


3.1.4.5 Ordenando colunas 

O Bootstrap preve os valores de classe col-xs-push-*, col-sn-push-*, col-nd-push-*, 
col-lg-push-* que se destinam a “empurrar” a coluna para a direita e os valores 
col-xs-pull-*, col- spi- pull-*, col-nd-pull-*, col-lg-pull-* que se destinam a “puxar” 
a coluna para a esquerda fazendo com que elas troquem de posi^ao, ou seja, 
alterando sua ordem. Observe o exemplo mostrado a seguir que esclarece o uso 
destas classes. 

• CSS 

.row dlv[class A ="col-"] { 
background: ttfafafa; 
border:lpx solid #ccc; 
font-size: 30px; 
font-weight: bold; 
padding: lOpx 0; 

} 

• HTML 

<dlv class= "container Ir > 

<dlv class="row"> 

<dlv class="col-nd-5 col-nd-push-7">5</div> 

<dlv class='’col-nd-7 col-nd-pull-5">7</div> 

</dlv> <!-- /.raj --> 

</dlv> <1-- /.container --> 

[.../c3/ordenando-colunas.html] 
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Neste exemplo, na marca^ao HTML, a coluna 5 esta a esquerda e a coluna 7 a 
direita e na render iza^ao ha troca das posi^ocs. 

Esse exemplo pratico demos tra como ordenar colunas e encontra-se disponivel 
para consulta online. 


3.1.5 Container fluido 

Vimos no item anterior que para cada faixa de largura de viewport foi estabelecida 
uma largura maxima para o container geral da aplica^ao. Este comportamento 
pode ser alterado de modo a que em quaiquer largura de viewport o layout se 
eomporte como fluido, ou seja, expanda para ocupar tod a a largura disponivel. 
Para isso basta que o valor da classe do elemento div container geral seja alterado 
de container para container-fluid como mostrado a seguir. 

• HTML 

<div class= "co n t ain er container-fluid”> 

<!-- igual ao exenplo rrostrado na figura 3.1 --> 

</div> <1-- /.container-fluid --> 

[,../c3/container-fluido.html] 

Neste exemplo mostramos como alterar o exemplo mostrado na figura 3.1 para 
que se eomporte como layout fluido. 

Esse exemplo pratico demostra como tornar o layout fluido e encontra-se dispo¬ 
nivel para consulta online. 

E valido usar-se os dois tipos de container (.container e .container-fluid) em uma 
mesma pagina. Um exemplo comum e aquele no qual o site adota uma faixa 
que sernpre se estende por toda a largura da viewport (faixa fluida) para o topo 
e outra para o rodape enquanto os conteudos, em telas maiores, sao renderizados 
em uma largura menor que a da viewport e centralizados na tela. 

Amarca^ao HTMLmostrada a seguir esclarece a estrutura geral para esta situagao. 

• HTML 

<header class=' l container-fluid , ’>TOPO</ headers 
<nain class= "container M >CONTEUDOS</piain> 
cfooter class=’ l container-fluid ,, ></footer> 
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3.2 Tipografia 

Antes de comegar a desenvolver layouts, e necessario aprofundar os conhecimentos 
que ja adquiriraos nos capitulos anteriorcs, com a finalidade de conhecer e saber 
usar as poderosas ferramentas que temos em maos quando optamos pelo uso do 
Bootstrap. Vamos falar de cstilizagao dos elementos tipograficos de uma aplicagao 
web. Servira de base para nossos esrudos de estilizagao, o arquivo bootstrap.css. 


Alerta: Os valores das propriedades CSS mostrados neste capituio sao valores 
padrao do Bootstrap. Caso alguns, ou muitos, desses valores nao seja o mais 
indicado para o seu projeto, nao se preocupe, pois voce nao precisara editar 
e alterar manualmente a folha de estilo. Voce podera baixar uma versao 
personalizada da folha de estilo em http://getbootstmp.com/customize/. 


3.2.1 Estilizagao do elemento body 

As declaragoes CSS para o elemento body sao mostradas a seguir. 

• CSS 

body { 
margin: O; 

font-fantly: "Helvetica Neue”, Helvetica, Arial, sans-serif; 

font-size: 14px; 

line-height: 1.42857143; 

color: #333; 

background-color: #fff; 

} 

A familia de fontes para todos os conteudos textuais dos elementos do Bootstrap, 
exceto para os elementos code, kbd, pre e sample e definida no seletor body. 

O tamanho de fonte padrao e 14px com a propriedade line-height definida em 
L42857143 que para um tamanho de fonte de 14px resuka em 1.42857143 x 14 = 
20px. A cor dos textos e a preta e do fundo a branca. 


Conheca os livros do Maujor; http://livrosdomaujor.com.br 




68 


Boostrap 3.3.5 


3.2.2 Estiliza^ao dos elementos hi - h6 

Os tamanhos de fonte para os niveis de cabe^alhos sao con forme mostrados a 


seguir. 







hi, 

.hi 

f 

fort- 

size; 

36px; 

} 

h2, 

.h2 

f 

fort- 

size: 

30px; 

} 

h3, 

.h3 

f 

fort- 

size: 

24px; 

} 

h4, 

.h4 

f 

fort- 

size: 

ISpx; 

} 

hs, 

.h5 

f 

font- 

size: 

14px; 

} 

he, 

.he 

{ 

font- 

size: 

12px; 

} 


Notar que esta prevista urtia classe com o nome igual ao nome da tag de cabegalho 
e se destina a uso geral. 

O elemento snail quando usado dentro de urn elemento de cabegalho recebe 
uma estiliza^ao especial em cor cinza clara e tamanho de fonte 80% do tamanho 
de fonte do cabe^alho. Opcionalmente pode-se usar a classe snail para obter o 
mesrao efeito. 

O exemplo mostrado a seguir esclarece esta estiliza^ao para cabc^alhos. 


• HTML 


<div class= "container ,r > 
<div class="row"> 


<div class="col-nd-12"> 
<hl>hl - Cabe^alho nivel 1 
<h2>h2 - Cabe^alho nivel 2 
<h3>h3 - Cabe^alho nivel 3 
<h4>h4 - Cabe^alho nivel 4 
<h5>h5 - Cabe^alho nivel 5 
<h6>h6 - Cabe^alho nivel 6 
</div> 


<snall>Texto 

<srcall>Texto 

<snall>Texto 

<snall>Texto 

<srtall>Texto 

<snall>Texto 


snali</snallx/hl> 
spiali</snail ></h2> 
spiall</snallx/h3> 
snall</snallx/h4> 
SFiali</snallx/hS> 
snall</snail x/h6> 


</div> <!-- /.raj --> 
</div> <1-- /.container --> 


[,../c3/estiliza gao-de-ca becalhos.html] 

Observe na figura 3.5 o resultado da aplica^ao da estiliza^ao padrao em elementos 
de cabeqalho, bem como o efeito do elemento snail. 
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hi - Cabegalho nivel 1 Texto small 

h2 - Cabe9a!ho nfvel 2 Texto small 

h3 - Cabegalho nivel 3 Texto small 
h4 - Cabegalho nivel 4 T 0 xto small 

h5 - Cabe?alho nivel 5 Texto small 
hS - Gabegalbo nfvel 6 Texto small 

Figura 3.5 - Estiliza$do de cabe^alhos. 

Esse exemplo pratico demostra a estilizagao padrao de elementos para cabegalhos 
e encontra-se dispomvel para consulta online. 


3.2.3 Estilizagao de elementos para textos inline 

Os elementos nark, del, ins, s, u, en, strong, i, b e snail sao usados e estilizados con- 
forme previstos nas especificagoes para a HTML5. 

O exemplo mostrado a seguir esclarece a estilizagao de elementos para textos inline. 


• HTML 

<div class="container”> 

<div class="row"> 

<div class="col-nd-12"> 

<nark>Estilizafao do elenentox/nark> <code>nark</code<hr> 
<del>Estilizagao do elenento</del> <code>del</code><hr> 
<ins>Estilizagao do elenento</ins> <code>ins</codexhr> 
<s>Estilizagao do elenento</s> <code>s</codexhr> 

<u>Estilizagao do elenento</u> <code>u</codexhr> 

<en>Estiliza;ao do elenento</en> <code>eiK/codexhr> 
<strong>Estilizafao do elenento</strong> <code>strong</codexhr> 
<i>Estilizagao do elenento</i> <code>i</codexhr> 

<b>Estilizagao do elenento <code>b</codex/bxhr> 
<srtall>Estilizagao do elenento <code>snall</codex/snall> 

</div> 

</div> <!-- /.row --> 

</'div> <1-- /.container --> 

[„./cB/estiliza cao-de-elementos-para-textos-inline.html] 
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Observe na figura 3.6 o resultado da aplica^ao da estilizagao padrao era elementos 
para textos inline. 

Estilizagao do eiemento mark 
Esti l izagao do elemcnto del 
Estilizacao do eiemento ins 
Esttfeag3o-de-eteffi€>Rl0 s 

Esttlizagao do eiemento u 
Estilizagao do eiemento em 
Estilizagao do eiemento strong 
Estilizagao do eiemento i 
Estilizagao do eiemento 
Estiiizagao do eiemento small 

Figurn 3.6 - Estilizagao de elementos para textos inline. 

Esse exetnplo pratico demosrra a estilizagao padrao de elementos para textos 
inline e encontra-se disponivel para consulta online. 


3.2.4 Estilizagao do eiemento abbr 

O eiemento abbr e usado para marcar abreviaturas em geral e estilizado de modo 
a mostrar uma janela tooltip com o significado da abreviatura quando o usuario 
coloca o ponteiro do mouse sobre ela. O texto do tooltip e definido no atributo 
title do eiemento abbr. 

Alem desse comportamento, o Bootstrap preve ainda o valor initialisn para o 
atributo classe do eiemento abbr. Definir esse valor de classe no eiemento abbr faz 
com que a abreviatura seja renderizada com urn tamanho de fonte igual a 90% 
do tamanho de fonte padrao da abreviatura. 

O exemplo mostrado a seguir esclarece a estilizagao deste eiemento. 

• HTML 

<div class= "container Ir > 

<div class="rcw"> 

<div class="col-nd-12"> 
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<pxabbr tLtle="HyperTextMarkupLanguage">HTML</abbr> e a 
linguagen de narcagao para aplicagoes web.</p> 

<pxabbr tit le="Hyper Text Markup Language" class= "initialise r, >HTHL</abbr> e a 
linguagen de narca^ao para aplicagoes vjeb. </p> 

</div> 

</div> <!-- /.raj --> 

</div> <!-- /.container --> 

</body> 

</htnl> 

[.../e3/estilizacao-do-elemento-abbr.html] 

Esse excraplo pratico demostra a estilizagao padrao do elernento abbr e a estili- 
za^ao com uso da classe initialisn e encontra-se disponivel para consulra online. 

3.2.5 Estiliza^ao do elernento address 

O elernento address, introduzido nas especifica^oes pela HTML5 e usado para 
marcar informa^oes de contato relacionadas aos conreudos de urn elernento article 
ou ao conteudo do elernento body como um todo. Nao deve ser usado para marcar 
endere^o postal generalizadamente exceto nos casos em que o endereqo postal 
fornega informa^oes de contato relacionadas aos conteiidos citados. 

Voce pode visualizar os efeitos de estiliza^ao padrao do Bootstrap para o elernento 
address consultando o arquivo e mostrado a seguir. 

• HTML 

<div class="container"> 

<div class="row"> 

<div class="col-nd-12’'> 

<p>Contato con o autor do artigo:</p> 

<address> 

<strong>Mauricio Sany Silva</strongxbr> 

Rua: General Paulino 123 sala 4567<br> 

<abbr title="C6digo de endereganento postal">CEP</'abbr>: 00000-000<br> 
Carapena, AM. 

</address> 

</div> 

</div> <!-- /.row --> 

</div> <1-- /.container 

[.../c3/estilizacao-do-elemento-address.html] 
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Esse exemplo pratico dernostra a estiliza^ao padrao do elemento address e encontra- 
-se disponivel para consulta online ou download e consulta local. 


3.2.6 Estiliza^ao dos elementos blockquote e cite 

O elemento blockquote e usado para marcar um bloco de texto, ou s&;ao, contendo 
uma cita^ao extraida de uma fonte externa ao documento. O elemento cite destina- 
-se a marcar o titulo de um trabalho, ou obra, por exemplo: o ritulo de um livro, 
urn fihne, um programa de TV um ensaio, um poema, uma rnusica, um jogo etc. 

Nao confundir o elemento cite com o atributo cite, esse deve ser usado com os 
elementos blockquote e q e cujo valor deve ser um URLapontando para o endere^o 
web de onde foi extraida a cita^ao marcada por aqueles elementos. 

Voce pode visualizar os efeitos de estilizagao padrao do Bootstrap para o elemento 
blockquote e para o uso do valor blockquote-reverse para o atributo class consultando 
o arquivo mostrado a seguir. 

• HTML 

<1DOCTYPE htnil> 

<dtv class="contalner’'> 

<dlv class="row"> 

<dlv class="col-nd-12''> 

<blockquote clte= "http://miw.edltoranovatec.con.br...”> 

<p>A tentatlva de o H3C evolulr...</p> 

<footer> 

<clte title="HTflL5 A llnguagen de narcagao que revolucionou a web">Maujor, 

...</clte> 

</footer> 

</blockquote> 

</dlv> 

</dlv> <!-- /.row --> 

<hr> 

<dlv class="row"> 

<div class="col-nd-12"> 

<blockquote clte="http://www.edltoranovatec.con.br..." class= "blockquote-reverse"> 
<p>A tentatlva de o W3C evolui...</p> 

<footer> 

<clte title="HTML5 A llnguagen de narcagao que revolucionou a web">Haujor, 

...</clte> 
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</footer> 

</blockquotes 
</div> 

</div> <!-- /.row --> 

</dlv> <!-- /.container --> 

[.../c3/estilizacao-do-elemento-blockquote.html] 

A render izagao do arquivo anterior e confer me mostrado na figura 3.7. Observe 
o efeito da estilizagao padrao do Bootstrap para os elernentos blockquote e cite e o 
efeito do atributo classe com valor blockquote-reverse destinado a alinhar o conte- 
tido de blockquote a direita. 


A tentative de o W3C evoluir a HTML para conformidade com XML fracassou, porque 
as paginas XHTML servidas como XML que contenham qualquer violagao com a 
sintaxe XML causarao um erro fatal de parseamento e a pagina simplesmente nao 
sera renderizada. 

— Maujor f no seu iivro HTML5 A linguagem de marcagao que revolucionou a web 


A tentative de o W3C evoluir a HTML para conformidade coni XML fracassou, porque as 
paginas XHTML servidas como XML que contenham qualquer violagao com a sintaxe 
XML causarao um erro fatal de parseamento e a pagina simplesmente nao sera 

renderizada. 

Maujor, no seu livro HTML5 A linguagem de marGagao que revolucionou a web — 


Figura 3.7- Estilizagdo dos elernentos blockquote e cite. 


3.2.7 E$tiliza0o de elernentos de lista 

Os elernentos ul, ol e dl dcstinados a marcar listas receberam lima estiliza^ao 
padrao do Bootstrap cabendo destacar o valor list-unstyled para o atributo class 
dos elernentos ul e ol. Definir esse valor de classe tem o efeito semeihante ao de 
se declarar list-style: rone; nas CSS, oil seja, retira os marcadores das listas. 

O Bootstrap preve o valor list-inline para o atributo classe dos elernentos ul e ol 
que marcam as listas de ordenadas e nao ordenadas. Definir esse valor de classe 
tem o efeito de alinhar horizontalmente os itens da lista. 
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O Bootstrap prove tambem o valor dl-horizontal para o atributo class dos ele- 
mcntos dl que marcam as listas do defini^ao. Detinir esse valor de classe tem o 
efeito de alinhar horizontalmente os termos de defini^ao (dt) com seus termos 
de descrigao (dd). 

Voce pode visualizar os efeitos de estiliza^ao padrao do Bootstrap para os ele- 
mentos de listas e para o uso dos valores unistyled e dl-horizontal para o atributo 
class consultando o arquivo mostrado a scguir. 

• HTML 

<div class= "container Ir > 

<div class="row"> 

<div class="col-nd-4"> 

<h3>Lista nao ordenada</h3> 

<ul> 

<li>Abacaxi</li> 

<li>Laranja 

<ul> 

<li>Lina</li> 

<li>Bahia</li> 

</ul> 

</li> 

<li>Hafa</li> 

</ul> 

</div> 

<div class='’col-nd-4"> 

<h3>Lista ordenada</h3> 

<ol> 

<li>Abacaxi</U> 

<li>Laranja 

<ul> 

<li>Lina</U> 

<li>Bahia</li> 

</ul> 

</li> 

<li>Haga</li> 

</ol> 

</'div> 

<div class="col-nd-4"> 

<h3>Lista sen narcadores</h3> 
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<ul class-'Tist-unstyled"> 

<U>Abacaxi</U> 

<U>Laranja 

<ul> 

<li.>Lina</li> 

<U>Bahta</li> 

</ul> 

</li> 

<lt>Haga</li> 

</'ul> 

</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class=”col-nd-12"> 

<h3>Lista nao ordenada inline</h3> 

<ul class="li.st- inTine"> 

<U>Abacaxi</li> 

<li>Laranja</U> 

<U>Lina</li> 

<li>Bahia</U> 

<U>Maqs</U> 

</ul> 

</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class="col-nd-6"> 

<h3>Lista de defini^ao padrao</h3> 

<dl> 

<dt>Abacaxi</dt> 

<dd>Ananas on abacaxi...</dd> 
<dt>Laranja</dt> 

<dd>A laranja e o fruto...</dd> 
<dt>Ma<;a</dt> 

<dd>A fia^a e o fruto ponaceo... </dd> 

</dl> 

</div> 

<div class="col-nd-6 r ’> 

<h3>Lista de definigao horizontal</h3> 

<dl class="dl-horizontal"> 
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<dt>Abacaxi</dt> 

<dd>Ananas ou abacaxi e una...</dd> 

<dt>Laranja</dt> 

<dd>A laranja e o fruto produzido...</dd> 

<dt>Maqk/dt> 

<dd>A rcaga e o fruto ponaceo...</dd> 

</dl> 

</div> 

</div> <!-- /.rrn --> 

</'div> <1-- /.container --> 

[.„/c3/estilizacao-de-listas.html] 

A renderizagao do arquivo anterior e conforme mostrado na figura 3.8. Observe 
o efeito da estilizagao padrao do Bootstrap para os elementos de lisra e para o 
atributo classe com os valores list-un sty led e dl-horizontal. 


Lista n3o ordenada 

Lista ordenada 


Lista sem marcadores 

• Abaca™ 

1. Abaca*i 


Ahacaxl 

+ Laranja 

2. Laranja 


Laranja 

* Lima 

* Lima 


* Lima 

4 Bahia 

* Bahia 


■> Bahia 

* MacS 

Lista nao ordenada inline 

3. Mac3 


HagS 

Abacaxi Latranja Lima Bahia Magi 

Lista de definig&o padrao 


Lista de definig&o horizontal 

A&acflxi 



Ananas ou abacaxi £ Lima ptan*a monocotiied&heo da 

Ananas ou abaeaxt e uma plarna monscatiieddnea da lamina das bFumetiace-as 


lamina dasDromEhawss subfarma Bromehoideae 

subramElfa Bromenofdeae. 

Laranja 


Laranja 

A laranja £ o rruto produzido peia laranje-ira (cirus * 
sinensis), time arvore da famina RLrtacaae. 

A larartjg e o fnito produzrclQ pefa laranpeira ICrtnjs * sinensis], urns arvom 4a familia 
Rutaeeae 

Mjfi 

A e o fmto pornaceo da msoeira. arwre da famUm Rosaceae 


A ma^1 e o fruto pomaceo da macieina. anrone da famite 
Rosaceae 


Figura 3.8 - Estilizagao de listas. 


3.3 Codigos 

Os elementos code, kbd, var, sanp e pre destinados a marcar codigos em linha e em 
nivel de blocos respectivamente receberam estilizagao padrao do Bootstrap ca- 
bendo destacar o valor pre-scrollable para o atributo class do elemento pre. Definir 
esse valor de classe tem o efeito de limitar a altura total do bloco de codigo a 
350px provocando o aparecimento de barra de rolagem vertical quando a altura 
do bloco de codigo for maior que os 350px. 
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• O elcmento kbd destina-se a marcar entrada do usuario, por exemplo teclas 
ou comandos de voz. 

• O clcmcnto var destina-se a marcar variaveis tanto em expressocs matema- 
ticas como variaveis de programas e scripts. 

• O elemento sanp destina-se a marcar saidas ou resuitados de programas. 

• O elemento code destina-se a marcar blocos de codigo. 

• O elemento pre destina-se a marcar textos pre formarados. 

Voce pode visualizar os efeitos de estiliza^ao padrao do Bootstrap para os elemen- 
tos de marca^ao de codigos e para o uso do valor pre-scrollable para o atributo 
classe consultando o arquivo mostrado a seguir. 

• HTML 

<div class= "container Ir > 

<div class="row"> 

<div class=”col-nd-3"> 

<h3>Elenento &lt;code&gt;</h3> 

<p>0s elenentos <code>&lt;div&gt;</ccde> e <code>Slt;span&gt; 

</code>nao ten valor senantico.</p> 

</div> 

<div class="col-nd-3"> 

<h3>Elenento &lt;kbd&gt;</h3> 

<p>Para aunentar pres stone <kbd>Ctr +</kbdx/p> 

</div> 

<div class="col-nd-3"> 

<h3>Elenento &lt;var&gt;</h3> 

<p>A equagao da reta e <var>y</var> = a<var>x</var> + b</p> 

</div> 

<div class="col-nd-3"> 

<h3>Elenento &lt;sanp&gt;</h3> 

<p>0s retorno do script foi <sanp>true</sanp></p> 

</div> 

</div> <!-- /.row --> 

<hr> 

<div class="row"> 

<div class="col-nd-6"> 

<h3>Elenento &lt; pre&gt;</codex/'h3> 

<pre> 

&lt; 1DOCTYPE htnb 


Conheca os livros do Maujor: http://livrosdomaujor.com.br 


78 


Boostrap 3.3.5 


&lt;htpil lang="pt-br"> 

&lt;head> 

</pre> 

</div> 

<div class="col-nd-6"> 

<h3>Elenento &lt; pre class="pre- scrollable"agt;</code></'h3> 

<pre class="pre-scrollable 1 ^ 

&lt;100CTYPE htnl> 

&lt;htnil lang="pt-br"> 

&lt;head> 

</pre> 

</div> 

</div> <!-- /.row --> 

</div> <1-- /.container --> 

[,../c3/estilizacao-de-eiementos-para-codigo.html] 

A renderiza^ao do arquivo anterior e conforme mostrado na figura 3,9. 


Elemento <code> Elemento <kbd> 

Os elementos <a±v> e Para a amenta r presstone 

<span> naa tern valor seminricQ, 

Elemento <var> Elemento <samp> 

A equated da rela £ y = ax +1> Os relonnci do script Toi true 

Elemento <pre> 

Elemento <pre class =,, pre-scrollable’'> 

< ■□OCTYPE htnl> 

t! DOC TYPE h.tnl> 


<h(tnl lang-'"pt-br' l > 

<html iang- 1 'pt-br*> 


<hced> 

<hcad> 


-imeta c ha r cet =‘'utf - B " 

f.iieca ctia rs et=" atf-a" > 


<titLe>Livro B-ootstrap ‘!aujor</titled 

<tltle>Livro Bootstrap f-lauj or-:/title > 


< li n k href- 51 . . /boot st rap/ l ss /bootstra p .iiin. css * rel-*sf yle 

<link hrcF=".. /boots trap/css/bootstrap.nin.css" rcl^sty 


sheet - > 

leshest" > 


</head> 

</head> 


<bady> 

drculyi 


da£s="caittalner > '} 

<div cla£s="i:ontalner"> 


Cdiv c Las s- "row”> 

<div class- "row" > 


<div class-"col- ks-5"> 

<div closs-"col-xs-5"> 


< h3 > Elemento ecdde>f/hJs 

cti3>Eleflientc <codex/h3.> 


<p> .... </p> 

<p> ... <fp> 


<p> ... */pi 

<pi ... </p> 


<p>_<j r p> 

cp> ... </p> 


<p> ... </p> 

<p> ... </pi 


<p> ... </p> 

<p> ... ’(/pi 


<.p? ... </p> 


... </p> 


<p> ... c/p> 


<p> ... </p> 


i / dlv > 



Figura 3.9 - Estiliza^ao de elementos para marcar codigo. 


Conheca os livros do Maujor: http://livrosdomaujor.com.br 










Capitulo 3 ■ CSS 


79 


Observe o efeito da estilizagao padrao do Bootstrap para os elementos para rnarear 
codigos e para o atributo classe com o valor pre-scrollable. Notar que a estilizagao 
padrao preve urn fundo cinza e uma borda arredondada para ambos os elementos. 


3.4Tabelas 

As funrionalidades do Bootstrap para estilizagao dc tabelas baseiam-se em valores 

do atributo class a serem declarados no elemento table conforme descritos a seguir. 

• table - Estilizagao basica da tabcla comprecndcndo declaragao de padding 
para as celulas e bordas horizontais entre linhas. Uso: <table class="table">. 

• table table-striped - Estilizagao basica mais efeito zebra nas linhas. Usa o 
seletor nth-child e por isso nao funciona nos 1E8 e anteriores. Uso: <table 
class=''table table-striped">. 

• table table-bordered — Estiliza a tabela com a declaragao de padding para as 
celulas e bordas. Uso: <table class="table table-bordered">. 

• table table-hover - Estilizagao basica da tabela c efeito over nas linhas dentro 
de tbody. Uso: stable class="table table-hover">. 

• table table-condensed - Estilizagao basica da tabela com linhas de altura 
reduzida. Uso: <table class-’table table-condensed":*. 

Sao previstos ainda, valores do atributo class a serem declarados no elemento tr. 

Os valores (nomes) dessas classes e suas finahdades sao listados a seguir. 

• active — Estiliza a linha da tabela na cor azul cinza claro c indica uma linha 
com status de ativa. Uso: <.tr class="active">. 

• success -Estiliza a linha da tabela na cor verde clara e indica uma linha com 
status de agao bem sucedida. Uso: <tr class=''success">. 

• info - Estiliza a linha da tabela 11 a cor azul clara e indica uma linha com 
status informativo. Uso: <tr class="info">. 

• warning — Estiliza a linha da tabela na cor laranja clara e indica uma linha 
com status de alerta. Uso: <tr class="warning">. 

• danger - Estiliza a linha da tabela na cor salmon clara e indica uma linha 
com status de perigo. Uso: <tr class="danger">. 
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Para demonstrar o uso e efeitos das classes de estiliza^ao de tabelas conforme 
descritas anteriormcnte usaremos nos cxemplos que seguem a marca^ao de uma 
tabela conforme mosrrada a seguir. 

• HTML 

<table> 

<caption>Estoque de frutas</caption> 

<thead> 

<tr> 

<th scope="col">No.</th> 

<th scope="col">Fruta</th> 

<th scope=''col''>Estoque<br>{kg)</th> 

<th scope="col">Pre<;o/caixa<br>(R$)</th> 

</tr> 

</thead> 

<tfoot> 

<trxtd colspan="4">Valores finals para o nes de fevereiro/2012</tdx/tr> 

</tfoot> 

<tbody> 

<tr> 

<td>l</td> 

<td>Abacaxi</td> 

<td>270</td> 

<td>125,90</td> 

</tr> 

<!-- Dais tres linhas de frutas --> 

</tbody> 

</table> 


3.4.1 Estiliza^ao basica 

• HTML 

<table class="table ir > 

<!-- rcarcaqao da tabela --> 
</table> 

[„./c3/estiliza cao-basica-de-tabela.html] 
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Este exemplo de estiliza^ao de tabela encontra-se disponivel para consulra online 
ou download e consulra local. 

Observe na figura 3.10 a render iza^ao da tabela basica. 


Tabela basica 



<table 

class="table"> 



Estoque de frutas 





Estoque 

Prego/caixa 

No. 

Fruta 

(*s) 

(R*> 

1 

Abacaxl 

270 

125,90 

2 

Laranja 

460 

156,75 

3 

Maga 

150 

98,20 

4 

Pera 

190 

74.40 


Valores finals para o mes de fevereiro/2012 


Figura 3.10 - Estilizagao de tabela basica. 


3.4.2 Estiliza^ao com efeito zebra 

• HTML 

<table class="table table-striped"> 

<!-- raarcacao da tabela --> 

</tables 

[.../c3/estilizacao-de-ta bela-efeito-zebra.html] 

Este exemplo de estiliza^ao de tabela encontra-se disponivel, para consulta online 
ou download e consulta local. 

Observe na figura 3.11 a renderizagao da tabela com efeito zebra. 

Para obter o efeito zebra o Bootstrap usa como seletor a pseudo-classe :nth-chlld() 
que nao e suportada pelo Internet Explorer 8. 
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Tabela com efeito zebra 

Ctable cla5s="table table-stripecT> 

Estoque de frutas 




Estoque 

Pre£o/caiKa 

No. 

Frnta 

>-9) 

(R*) 

1 

Abacaxl 

270 

125,90 

2 

Laranja 

460 

156,75 

3 

Mapa 

150 

98,20 

4 

Pera 

190 

74,40 


Vatores finals para o mes de feveretro/2012 

Figura 3.11 - Estilizagao de tabela com efeito zebra. 


3.4.3 E$tiliza0o com classes de contexto 

Em tabelas as classes de conrexto se destinam a estilizar as linhas da rabela com 
cores indicativas de um estado. Estas classes devcm ser definidas para o elemento 
tr. As classes de contexto para tabelas e seus nomes e cores sao: active (cor do 
tcma), success (cor verde), Info (corazul), warning (coramarela) e danger (corsalmao). 

• HTML 

ctable class="table"> 

<tr class="succes">. ..</tr> 

<!-- narca^ao da tabela --> 

</table> 

[.../c3/estilizacao-de-ta bela-com-classes-de-contexto.html] 

Este exemplo de estilizagao de tabela encontra-se disponivel, no site do livro, para 
consulta online ou download e consulta local. 
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<table class="table table-bordered"» 

<!-- raarcacao da tabela --> 

</table> 

[.../c3/estiliza cao-de-tabela-com-bordas.html] 

Este exemplo de estiliza^ao de tabela encontra-se disponivel, no site do livro, para 
consulta online ou download e consulta local. 

Observe na figura 3.12 a render iza^ao da tabela com bordas. 


Tabela com bordas 

<table cla55="tal>le table -bordered ,r > 

Estoque de frutas 

No. 

Fruta 

Estoque 

m 

Prego/caixa 

(RS) 

1 

Abacaxi 

270 

125.90 

2 

Laranja 

460 

156.75 

3 

Ma-ga 

150 

93,20 

4 

Pera 

100 

74,40 

Vaio res finals para o mesde fevereiro/2012 


Figura 3.12 - Estiliza^do de tabela com bordas. 


3.4.5 Estiliza^ao com efeito hover nas linhas 

• HTML 

<table class="table table-hover"> 

<!-- raarcat^ao da tabela --> 

</table> 

[.../c3/estilizacao-de-ta bela-efeito-hover.html] 
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Este exemplo de estiliza^ao de tabela encontra-se dispomvel, no site do livro, para 
consulta online ou download e consulta local. 

Observe na figura 3.13 a renderiza^ao da tabela com efeito hover nas iinhas (o 
mouse esta sobre a segunda linha). 


Tabela com efeito hover 

stable closs="table table-hover"> 

Estoque de frutas 


No. 

Fruta 

Estoque 

|kg) 


Pnego/caisa 

|R*) 

1 

Abacaxi 

270 


125,90 

2 

Laranja 

460 


156,75 

3 

Maga 

150 


98,20 

4 

Pera 

190 


74.40 


Va tores fin a is para o rres de fevereiro/2012 


Figura 3.13 - Efeito hover em Iinhas de tabela. 


3.4.6 Estiliza^ao com Iinhas condensadas 

• HTML 

ctable class^table table-condensed"> 

<!-- rcarcai;ao da tabela --> 

</table> 

[„./c3/estilizacao-de-ta bela-condensada.html]] 

Este exemplo de estilizagao de tabela encontra-se dispomvel, no site do livro, para 
consulta online ou download e consulta local. 

Observe na figura 3.14 a renderiza^ao da tabela com Iinhas condensadas. 
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Tabela basica com efeito condensado 

<table cla5s= n table table-condensed"> 

Es-toque de frutas 

Estoque Pre?Q/caixa 

No. Fruta (kg) (R%) 


1 

Abacaxi 

270 

125.90 

2 

Laranja 

460 

156,75 

3 

Ma^i 

150 

38.20 

4 

Pera 

190 

74,40 

Vafores finais para o mes de fevereiro/2012 


Figura 3.14 - Estilizagdo de tabela com linhas condemadas. 

Para obter este efeito simplesmente dirainuiu-se o valor de padding das linhas. 


3.4.7 E$tiliza0o responsiva 

Por padrao as tabelas tem um comportamcnro igual ao cornportamento dos 
denials elementos da marca^ao, ou seja, contraem para se adaptar a largura da 
viewport. O Bootstrap preve a classe table-responsive que se destina a clirainar 
o cornportamento de contra^ao da tabela em viewports com largura inferior a 
768px e criar uma barra de rolagem horizontal para a tabela. Notar que a tabela 
recebe urn elemento div como container e e esse elemento que recebe a classe 
table-responsive. 

• HTML 

<div class="table-responsive"> 
ctable class="table"> 

<!-- rcarcafao da tabela --> 

</tables 

</div 

[.../cB/estiliza cao-de-tabela-responsiva.html] 

Este exemplo de estiliza^ao de tabela encontra-se dispomvel, no site do livro, para 
consulta online ou download e consulta local. 
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Observe na figura 3.15 a renderizagao da tabela com cfeito responsivo. 


Tabela com efeito 
responsivo 

<div class= ,r table .responsive" >... </div> 


Estoque de rut as 



No. 

Fruta 

Estoque 

(kg) 

Pre^Oi'caixa 

(RS) 

1 

Abacaxi 

270 

125.90 

2 

Laranja 

460 

156,75 

3 

Ma^a 

150 

98,20 

4 

Pera 

190 

74,40 

Valores finals para o mes de fevereira/201 



1 ► 


Figura 3.15 - Estiliza$ao de tabela responsiva. 


3.5 Formularios 

As funcionalidades do Bootstrap para estilizagao de formularios baseiam-se cm 
valorcs do atributo classe a serem declarados nos clementos de formulario e cujos 
seletores CSS e respectivas finalidades estudaremos a seguir. 


3.5.1 Estilizagao de controles 

O Bootstrap preve varias classes a serein aplicadas nos diferentes controles de for- 
muiarios possibilitando uma estilizagao padrao. Nesse item veremos como aplicar 
as classes de estilizagao de controles e mostraremos os efeitos dessa estilizagao, 

3.5.1.1 Estilizagao de input etextarea 

Os controles input tipo text e textarea recebem uma estilizagao padrao sem neces- 
sidade de declarar uma classe. A estilizagao consisre na aplicagao de uma borda 
cinza com cantos arredondados. Ao ser dado o toco ao controle a borda assume 
a cor azul com um efeito de sombra em volta, tambem na cor azul. 
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Alerta: Os navegadores Internet Explorer versoes anteriores ao IE9 nao supertam 
bordas arredondadas nem o efeito de sombra para o foco, contudo nenhuma 
funcionalidade do controle se perde para aqueles navegadores, sendo que o foco 
no controle causa outline pontilhada. 


Amarcagao HTML minima para mostrar a renderizagao estilizada desses controles 
e conforme a seguir. 

• HTML 

cinput type="text" placeholder "None "> 

ctextarea rows= r 'S" placeholder="Sua nensagen aqui"x/textarea> 

Na figura 3.16 mostramos a renderizagao padrao c o efeito ao ser dado o foco no 
controle. 


Repouso Foco 


Nome 


flome 




Sua mensagem aqui 


■ 

|sua mensagem aqui 



Figura 3.16 - Estilizagdo de caixas de texto. 


3.5.1.2 Estilizagao de botoes 

O Bootstrap preve classes para estilizar botoes. Essas classes destinam-se a defi- 
nir cores e dimensoes dos botoes. Teoricamente as classes podem ser aplicadas 
a qualquer elemento HTML da marcagao, contudo a sua finalidade principal e 
para estilizagao dos elementos HTML para marcar ancoras a e botoes, mais espe- 
cificamente os elementos button e os elementos input dos tipos button, subnit e reset. 

Esta prevista a classe btn que serve de seletor para regras CSS que estilizam o 
botao sem bordas, cor de fundo cinza e cantos arredondados. 

Deve-se usar a classe btn-* era conjunto com a classe btn para completar a estili¬ 
zagao do botao conforme descrito adiante. 
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O Bootstrap preve oito classes para estilizar botoes de forma geral. Os nomes 
dessas classes e suas finalidades sao listadas a seguir. 

• btn — Destina-se a estiliza^ao padrao de urn botao. Estiliza o botao sent 
bordas, cor de fundo cinza e cantos arredondados. 

* btn -default — Botao com fundo na cor branca e borda cinza arredondada. 

* btn-prinary — Botao com fundo na cor azul escura e borda arredondada. 

• btn-success — Botao com fundo na cor verde clara e borda arredondada. 

• btn-info - Botao com fundo na cor azul clara e borda arredondada. 

* btn-warning — Botao com fundo na cor laranja clara e borda arredondada. 

* btn-danger — Botao com fundo na cor salmao clara c borda arredondada. 

• btn-link —Esta classe se destina a ser aplicada (cm conjunto com a classe btn) 
exclusivamente aos botoes marcados com o elemento button. Ela transforma 
o botao padrao marcado com aquele elemento em um link padrao (como 
se fosse marcado com o elemento a). 

Ao ser dado o foco a qualquer um dos botoes o fundo assume uma cor mais escura. 

Embora o elemento a destinado a marcar ancoras em geral, nao seja um controle 
de formulario, pode ser estilizado como um botao com uso destas classes. 


Alerta : Os navegadores Internet Explorer versoes anteriores ao IE9 nao suportam 
bordas arredondadas nem o efeito degrade que, nesses casos, se transforma em 
uma cor cinza solida, contudo nenhuma funcionalidade dos botoes se perde 
para aqueles navegadores. 


A marca^ao HTML minima para mostrar a renderiza^ao estilizada de alguns 
botoes e con forme a seguir. 

• HTML 

ebutton type= "button" class="btn btn-primary" >button pri.piary</button> 
ebutton type="button" class-'btn btn-default" >bjtton default</button> 

<input type="submit" class="btn btn-success" value="input-subrvit success "> 

<input type="button" class="btn btn-warning" value="input-button warning"> 

<a href = "ft" cl as s= 11 btn btn-dange 

<button type="button” class="btn btn-link" >button link</button> 
[.../c3/estilizacao-de-botoes.html] 
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Ao usar urn elemento a para criar urn botao nao esque^a de marcar o atributo e 
seu valor role=”button". 

Na figura 3.17 mostramos a renderiza^ao dos botoes conforme a marca^ao anterior. 


button primary 

button default | 

input-submit success 

input-button warning 

1 link danger 

azui escuro 

branco 

vercte daro 

iaranja daro 

sal mao daro 


Figura 3.17 - Estilizagdo de botoes. 

Por padrao, os botoes sao estilizados corn uni padding que determina suas di¬ 
mensoes. As classes .bt-lg,.btn-sn e .btn-xs possibilitam que se altere aquele valor 
padrao de padding e se obtenha botoes com dimensoes maiores, menores e muito 
menores que o botao padrao respectivamente. 

A marca^ao HTML para criar tais botoes e conforme a seguir. 

• HTML 

<button type= "button” class="btn btn-active btn-lg”>botao naior</button> 
cbutton type="button" class="btn btn-active''>botao padrao</button> 

<button type="button” class="btn btn-active btn-sn">e="button” 
class="btn btn-active btn-xs' [ >botao nuito nenor</button> 

[.../c3/dimensoes-de-botoes.html] 

Na figura 3.18 mostramos a renderiza^ao dos botoes conforme a marcagao anterior. 






botao maior 

botao padrao 

botao menor 

botao muito menor 




Figura 3.18 - Dimensoes de botoes. 

Por padrao os botoes sao elementos do tipo inline. A classe btn-block faz com que os 
botoes se comportem como elementos nivcl de bloco e sc expandam em largura 
por tod a a largura do elemento que os contem. 

Use a classe active para cstilizar um botao tal como quando cle recebe o foco (cor 
de fundo mais escura). 

Para desabilitar um botao use o atributo disabled. Botoes desabilitados sao estili¬ 
zados com uma cor de fundo mais clara. 

A marcagao HTML para criar aplicar estas classes aos botoes e conforme a seguir. 
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• HTML 

cdiv class= "container Ir > 
cdiv class=Tow"> 

<div class="col-nd-6 r ’> 

<button type="button" class="btn btn-info btn-block">botao nivel de bloco</button> 
cbutton type="button" class="btn btn-success btn-block">botao nivel de bloco</button> 
cbutton type="button" class="btn btn-danger btn-block">botao nivel de bloco</button> 

</'div> 

<div class="col-nd-6"> 

<buttor type="button" class="btn btn-info active">botao estado ativo</button> 
<button type-"button" class="btn btn-success active Abotao estado ativo</button> 
<button type="button" class="btn btn-danger active">botao estado ativoc/button> 
</div> 

</div> <!-- /.row--> 

<hr> 

<div class="row"> 

<div class="col-nd-6"> 

<button type="button" class="btn btn-info disabled’Sbotao desabilitado</button> 
<button type="button" class="btn btn-success disabled">botao desabilitado</button> 
cbutton type="button" class='btn btn-dan</button> 

</div> 

</div> <!-- /.row --> 

</’div> <1-- /.container --> 

[.../c3/o utras-dasses-para-botoes.html] 

3.5.1.3 Estilizagao de checkbox 

Para os controles input tipo checkbox esta prevista a classc checkbox que serve de seletor 
para regras CSS destinadas basicamentc a definir padding, nargin e alinhamentos 
com o objetivo de obter uma renderiza^ao crossbrowser para esses controles. 

Amarcagao HTML para cada checkbox e seu rotulo devera estar contida dentro 
de lira elemento div que recebe a classe checkbox conforme mostrado a seguir. 

• HTML 

<div class="checkbox"> 

clabelxinput type=" checkbox ">0pgaol</labels 
</div> 

cdiv class="checkbox"> 
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dabelxinput type=" check bo x" >0p?ao2 </ lab el > 

</div> 

<div class="checkbox"> 

•dabelxinput type="checkbox">0pfao3</label> 

</dlv> 

Os conrroles sao rcnderizados na vertical. Opcionalmente voce podcra usar a classe 
checkbox-inline a ser declarada para o elemento label, que provoca a renderiza^ao 
na horizontal conforme mostrado a seguir. 

• HTML 

dabel class="checkbox-inline"xinput type="checkbox''>Oppaol</label> 
dabel class="checkbox-inline"xinput type= "checkbox ">0pc;ao2</label> 
dabel class="checkbox-inline"xinput type= "checkbox ">0p^ao3</label> 

E possivel estilizar os campos checkbox era formato de bo toes conforme mostrado 
na marca<;ao HTML a seguir. 

• HTML 

<div class="btn-group" data-toggle="buttons"> 
dabel class="btn btn-prinary active"> 

dnput type="checkbox" autocortplete="off" checked>Opi;ao 1 (narcado) 

</labels 

dabel class="btn btn-primary "> 

dnput type="checkbox'’ autocorcplete="off">Op<;ao 2 
</labey"> 

dnput type="checkbox" autocorfplete="off">Op<;ao 3 
</label> 

</div> 

[„./c3/estiliza cao-de-checkbox.html] 

Na figura 3.19 mostramos a renderiza^ao dos controles na vertical e na horizontal 
e tambem a estiliza^ao dos checkboxes em formato de botao, conforme as mar- 
ca^oes anteriores. 


Checkbox na vertical Checkbox na horizontal Checkbox com botoes 

□ Op^aol □ Opgaol □ Op^ao2 □ Qpgao3 

□ Op£ao2 
LJ Op£ao3 


Figura 3.19 - Checkbox na vertical, horizontal e botdes. 


Oppao 1 fmarcado) Oppao 2 Oppao 
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3.5.1.4 Estiliza^ao de botao radio 

A marca^ao HTML para cada botao radio e seu rotulo devera estar contida dentro 
dc urn elcracnto div que rcccbc a classc radio conformc raostrado a seguir. 

• HTML 

<div class="radio"> 

•dabelxinput type="radio" nane="opcoesl">Qpgaol</label> 

< 1 div> 

<div class="radio"> 

dabelxinput type = 'radio" nane="opcoesl ">0pgao2</ label> 

</div> 

<div class="radio"> 

<labelxinput type="radio" riaae=’ l opcoesl">0p(;ao3</label> 

</div> 

Os conrroles sao render izad os na vertical. Opcionalmente voce podera usar a classe 
radio-inline a ser declarada para o elemento label, que provoca a render iza^ao na 
horizontal conformc mostrado a seguir. 

• HTML 

dabel class=" radio-ini ine"xinput type= ,, radio" narce=" op coes2 11 > Op ^aol</1abel> 

<label class=" radio-inline" xinput type= "radio" nane=" op coe s2 11 > Op £ao2< /1 ab el > 
dabel class=" radio-inline" xinput type= r ' radio" nane="opcoe s2">0pgao3< / lab el > 

E possivel estilizar os campos tipo radio em forma to de botoes conformc mostrado 
na marca^ao HTML a seguir. 

<div class="btn-group" data-toggle="buttons"> 

<label class="btn btn-prinary"> 

cinput type="radio" nane=”opcao" id="opcaol" autoconiplete=”off">Radio 1 
</label> 

<label class="btn btn-prinary"> 

<input type="radio" nane="opcao” id="opcao2" autoconiplete= ,, off">R3dio 2 
</label> 

<label class-’btadio" nane=”opcao" id="opcao3" autocopiplete="off'>R3dio 3 
</label> 

</div> 

[.../c3/estilizagao-de-botao-radio.html] 
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Na figura 3.20 mostramos a renderizagao dos controles na vertical e na horizontal 
e tambem a estiliza^ao dos campos tipo radio era formato de botao, conformc as 
marca^oes anteriores. 


Botao radio na vertical Botao radio na horizontal Botao radio com botoes 

Q Opcaol O Opfaol O Opcao2 0 Op^aoS 

Q Op$ao2 
O Op9ao3 

Figura 3.20 - Botao radio na vertical, na horizontal e botoes. 

3.5.1.5 Estiliza^ao de select 

Os controles do tipo sele^ao devem ser raarcados com a classe form-control para 
recebcm uma estiliza^ao padrao que consiste sirnplesmentc na aplica^ao de uma 
borda cinza com cantos arredondados. A largura deste elemento e igual a largura 
do seu container. 


Radio 1 Radio 7 Radio 


Alerta: Os navegadores Internet Explorer versoes anteriores ao IE9 nao suportam 
bordas arredondadas. 


A estiliza^ao da borda e aplicada mesmo quando se declara o atributo multiple 
para o elemento select. A marca^ao HTML minima para mostrar a renderiza^ao 
estilizada desses controles c conforme a seguir 

• HTML 

<select class= M forn-control"> 

<option>Escolha una das opc6es</option> 

<option>Opfaol</option> 

<option>0p^ao 2</option> 

</selects 

<select class-'form-control" multiples 
/options 

<option>0p^ao l</option> 

<option>0pcao 2</option> 

</select> 

[.../c3/estilizacao-de-select.html] 
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Na figura 3.21 inostramos a render iza^ao dos controles com e sem a definfeao do 
atributo nultiple confer me a marcaqao anterior. 


Escoiha uma da&opffies 


¥ 


Escolfta Lima dasopgoes 


D 


Oppao 1 
Oppao2 
Opcao 3 


Figura 3.21 - Controle de selegao. 


3.5,1.6 Texto de ajuda em controles 

O Boostrap preve a classe help- block que se destina a posicionar os textos de ajuda 
para preenchimento ou mensagens de valid a^ao de controles. 

O exemplo mostrado a seguir esclarece a defini^ao desta classe para criar textos 
de ajuda em dois campos. 


* HTML 


<input type="text" class="forn-control” placeholder="Seu CPF 1 ' aria- 
describedby="helpBlockr> 

<span id="helpBlockl” class="help-block">sonente nuneros</span> 

<input type="text" class="forn-control” placeholder="y="helpBlock2"> 

<span id="helpBlock2" class="help-block''>dd,rin/yyyy</span> 

[,../c3/estilizacao-texto-de-aj uda.html] 

3.5.2 Estiliza^ao de formulario 

O Bootstrap preve uma cstilizagao padrao para formularios, bastando que se 
marque um div container com a classe forn-group para cada conjunto de controles 
do formulario. 

Esta prevista a classe forn-inline a ser declarada para o elemento forn e cuja fina- 
lidade e estilizar o formulario em linha. 

3.5.2.1 Estilizagao padrao e em linha 

O codigo mostrado a seguir e a marca^ao HTML para um formulario simples e 
sera usado para mostrar as estiliza^oes padrao e em linha aplicada pela folha de 
estilos do Bootstrap. 
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<forn> 

<div class="forpi-group°> 

<label fo r="email"> Enail</1 abel> 

cinput type="enail" class="forrvcontrol" id="enail" placeholder="Entre seu emails 
</div> 

<div class="forpi-group"> 

<label for="senha">Senha</label> 

<input type=’'password" class="forn-control" id="senha" placeholder="Senha"> 

</div> 

<cdiv class="forfi-group"> 

<div class= "checkbox'^ 

<label>Escolha as cores 

</div> 

cbutton type="subnit" class="btn btn- 

<forrt class="forn-inUne"> 

<--l igual ao formuiario anterior --> 

</forn> 

[.../c3/estilizacao-padrao-e-etn-linha-de-formu!ario.html] 

Na figura 3.22 mostramos a renderiza^ao padrao e em linha para o formuiario, 
conforme a inarca^ao anterior, 

Emajil 

! Enfreseu ereaif 

Senna 

| Senna 

Escolfta as cores 

□ Azul 

y Verde 

□ Vermelha 

Enviar 


Email Enlie seu enroll Senha senna Escoiiia as cones uazuIUV erde -'Vermeifia Enviar 


Figura 3.22 - Formuiario com estitizagdo padrao e em linha. 
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3.6 Imagens 

O Bootstrap preve a aplicagao de tres cfeitos simples cm imagens inseridas com 
uso de marcagao HTML. Os efcitos sao aplicados quando se define os valores do 
atributo classe para o elemento ing conforme listados a seguir. 

• Lug- rounded - Aplica na imagem cantos arredondados usando raio igual a 
6px. 

• big-circle —Aplica na imagem cantos arredondados usando raio igual a 50%. 
A imagem e renderizada como um circulo ou uma elipse, dependendo do 
seu aspect-ratio. 

• ing-thunbnail — Aplica na imagem um padding de 4px e uma borda de lpx na 
cor cinza. 

No Bootstrap, por padrao, as imagens nao sao responsivas, assiin, para fazer a 
imagem responsiva use a classe lug-responsive. 

Se voce pretende que todas as imagens da sua aplica^ao sejam responsivas, por 
padrao, crie a seguinte regra CSS. 

• HTML 

img { 

display: block; 
nuto; 

} 

Para visualizar a estilizagao das imagens com os tres efeitos aplicados consulte o 
arquivo disponivel no site do livro conforme marca^ao HTML tipica, mostrada 
a seguir. 

• HTML 

<ing class="iftg- responsive Lpig-circle" src=’inagen. jpg" alt= r, dinossauro"> 

<ing class="iFig- responsive ing-rounsauro'S 

<ing class="ifig- responsive iFig-thunbnaU r ' src=' r inagen. jpg" alt=”dinossauro"> 
[.../c3/estilizacao-de-imagem.html] 

Na figura 3.23 mostramos o efeito em imagens resultantes da defini^ao dessas 
classes, conforme marca^ao HTML anterior. 
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Figura 3.23- Estilizagdo de imagem. 


3.7 Classes auxiliares 

O Bootstrap preve uma serie de classes denominadas de helper classes que se desti- 
nam a destacar, centrar, flutuar, esconder, textos e coinponentes bem como destacar 
fundos, inserir marcas visuais fornecer dicas para leitores de tela e navega^ao por 
teclado. Veremos, a seguir, a aplicaqao e efeitos de tais classes. 


3.7.1 Cores contextuais 

Para estilizar textos com uma cor estao disponrveis as seguintes classes. 

• text-nuted - Estiliza textos na cor #777. 

• text-prinary - Estiliza textos na cor #337ab7. 

• text-success — Estiliza textos na cor #3c763d. 

• text-info - Estiliza textos na cor #31708f. 

• text-warning - Estiliza textos tiliza textos na cor #a94442. 

Para visualizar a estiliza^ao de textos com estas cores consulte o arquivodisponivel 
no site do livro conforme marca^ao HTML tipica, mostrada a seguir. 

• HTML 

<p cl ass=' ! text-nuted" >£ste e uni texto estilizado com a cl ass e <code>miJted 
</codex/p> 

<p class="text-prinary">Este e un texto estilizado con a classe <code>text-prinary 
</codex/p> 
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<p class= "text-success ">Este e un texto estilizado con a classe <code>text-success 
</codex/p> 

<p class= "text- info">Este e un texto estilizado con a classe <code>text-info 
</codex/p> 

<p class="text-warning">Este e un texto estilizado con a classe <code>text-warning 

</codex/p> 

<p class= "text-danger ir >Este e un texto estilizado con a classe <code>text-danger 
</codex/p> 

[.../c3/estilizacao-de-textos-com-cores.html] 


3.7.2 Fundos contextual 

Para estilizar o fundo de um box com uma cor estao disponiveis as seguintes classes. 

• bg-prinary - Estiliza textos na cor #337ab7. 

• bg -success — Estiliza textos na cor #dff&d8. 

• bg-info - Estiliza textos na cor Sd9edf7. 

• bg-warning - Estiliza textos na cor #fcf8e3. 

• bg -danger - Estiliza textos na cor #f2dede. 

Para visualizar a estilizagao de fundo de boxes com estas cores consulte o arquivo 
disponivel no site do livro conforme marcagao HTML tipica, mostrada a seguir. 

• HTML 

<p class="bg-nuted">Este e un box con cor de fundo estilizada con a classe ccodesnuted 

</'codex/p> 

<p class="bg-prinary">Este e un box con cor de fundo estilizada con a classe <code> 
bg-prinary</codex/p> 

<p class="bg-success”>Este e un box con cor de fundo estilizada con a classe 
<code>bg-success</codex/p> 

<p class="bg-info">Este e un box con cor de fundo estilizada con a classe <code>bg-info 
</codex/p> 

<p class="bg-warning">Este e un box con cor de fundo estilizada con a classe 
<code>bg -warning</codex/p> 

<p class="bg-danger">Este e un box con cor de fundo estilizada con a classe 
<code>bg-danger</codex/p> 

[.../c3/estilizacao-de-fundos-com-cores.htmi] 
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3.7.3 Marcadores fechar e dropdown 

Para criar urn marcador X (xis) que indica fechamento de uma janela usa-se a 
classe close cm um elemento button combinado com um elemento span para mar- 
car o xis. Para criar um marcador tipo pcqueno triangulo apontando para baixo, 
destinado a indicar abertura de um e caret em um elemento span. 

Para visualizar a estiliza^ao e cria^ao destes dois marcadores consulte o arquivo 
disponivel no site do livro conforme marca^ao HTMLtipica, mostrada a seguir. 
Notar que por padrao a marca para fechar e posicionada no canto superior a 
direita do container. 

• HTML 

<button type= "button" class="close’' aria-label= "Close"xspan aria-hidden="true">&tines; 

</spanx/button> 

cspan class="caret"></spans 

[.../c3/estilizacao-de-marcadores.html] 


3.7.4 Flutuar 

Para flutuar elemento as classes .pull-left e .pull-right respectivamente. 

Para visualizar o efeito destas classes consulte o arquivo conforme marca^ao 
HTML tipica, mostrada a seguir. 

• HTML 

<p class= "pull-left IK >Paragrafo a esquerda</p> 

<p class="pull-right">Paragrafo a direita</p> 

[.../c3/estilizacao-com-float.html] 


Alerta: Estas classes nao devem ser usadas em barras de navega^ao. Conforme 
veremos no capitulo 4, para barras de navega^ao existem as classes navbar-left e 
navbar-right. 


3.7.5 Cfearfix a classe clearfix 

Para "clarear floats" use a classe clearfix no container dos elementos flutuados. 
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Para visualizar o efeiro destas classes consulte o arquivo conforme marca^ao 
HTML tipica, mostrada a seguir. 

• HTML 

<div class="clearfix''> 

<p class="pullTeft ir >Paragrafo a esquerda</p> 

<p class="pull-right">Paragrafo a direita</p> 

</div> 

[.../c3/estilizacao-com-dearfix.html] 


3.7.6 Centrar na horizontal 

Para centrar na horizontal use a classe center-block. 

Para visualizar o efeito desta classe consulte o arquivo conforme marcaqao HTML 
tipica, mostrada a seguir. 

• HTML 

<p class= "center-block" style="width :Sffi r, > 

Loren ipsun... 

</div> 

[„./c3/estiliza cao-para-centrar.html] 


3.7.7 Mostrar e esconder 

Para revelar e esconder conteudos, inclusive para leitores de tela, use as classes .show 
e .hidden respectivamente. 


3.7.8 Leitores de tela e navega^ao por tedado 

Para esconder conteudos exceto para leitores de tela use a classe sr-only. Os conteudos 
escondidos com esta classe devem ser revelados obrigatoriamente para usuarios 
que navegam com uso do teclado. Para isso existe a classe sr-only-foe usable deve 
ser usada em conjunto com .sr-only. 
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3.7.9 Image replacement 

Esconder um rexro denrro de um elemenro e substitui-lo por imagern e uma 
tecnica conhecida como image replacement. Nestes casos, para esconder o texto 
use a classe text-hide. 


3.7.10 Mostrar e esconder por breakpoints 

O Bootstrap preve uma serie de classes para controlar a visibilidade de contcu- 
dos de acordo com o breakpoint. E posslvel mostrar conreiidos em larguras de 
viewport acima de determinada largura e esconde-los abaixo daquela largura e 
vice-versa. 

Convent ressaltar que a op^ao pelo uso destas classes deve ser resultante de uma 
cuidadosa analise e conveniencia, pois uma das diretrizes fundamentals do design 
responsivo preconiza que nao se deve esconder conteudos em fun^ao de larguras 
de telas ou natureza dos dispositivos. 

Nas tabelas 3.1 e 3.2 mostramos a sintaxe destas classes e seus efeitos. 


Tabcla 31- Classes responsivas sintaxe 



Telefones (<768px) 

Tablets(>=768px) 

Desktop (>=992px) 

Desktop (>=120Qpx) 

.visible-xs-* 

MOSTRA 

ESCONDE 

ESCONDE 

ESCONDE 

.visible-sm-* 

ESCQNDE 

MOSTRA 

ESCONDE 

ESCONDE 

.visible-md-* 

ESCONDE 

ESCONDE 

MOSTRA 

ESCONDE 

.visible-lg-* 

ESCONDE 

ESCONDE 

ESCONDE 

MOSTRA 

.hidder-xs 

ESCONDE 

MOSTRA 

MOSTRA 

MOSTRA 

.hidden-sm 

MOSTRA 

ESCONDE 

MOSTRA 

MOSTRA 

.hidder-md 

MOSTRA 

MOSTRA 

ESCONDE 

MOSTRA 

.hidder-lg 

MOSTRA 

MOSTRA 

MOSTRA 

ESCONDE 


Tabela 3.2- Classes responsivas niveis 


Grupo de classes 

CSS display 

.visible-*-block 

display: block; 

.visible-*-tnline 

display: inline; 

.visible-*-iniine-block 

display: inline-block; 
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Observe a seguir um exemplos de sintaxe para algumas desras classes. 


• HTML 


<span class="hidden-xs">Esconde ert x-snall</span> 

<span class="visible-xs-block ">Visivel ert x-snall</spans 

<span class="hidden-sn”>Esconde en snalie/spans 
<span class="visible-sn-block">Visivel ert snallc/spans 

<span class="hidden-nd">Esconde en nediurt</ span> 
cspan class="visible-nd-block">Visivel en nediunc/spans 

<span class="hidden-lg">Esconde en largec/spans 
<span class="visible-lg-block"sVisivel en larges/spans 


[„./c3/estiliza cao-mostra-esconde-por-breakpoints.html] 


3.7.11 Classes para impressao 

O Bootstrap preve uma serie de classes para controlar os conteudos a serem 
impressos. 

Na tabela 3.3 mostramos a sintaxe destas classes e seus efeitos. 


Tabela 33- Classes para impressao 


Classes 

Navegador 

Impressao 

.visibie-print-block 

ESCONDE 

MOSTRA 

.visible-print-inline 

ESCONDE 

MOSTRA 

.visible-print-inline-block 

ESCONDE 

MOSTRA 

.hidden-print 

MOSTRA 

ESCONDE 


3.8 Validagao de formularios 

A indicaqao do resultado da valida^ao faz-se com uso de cores e adicionalmente 
com inser^ao de icones. 
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3.8.1 Valida^ao com cores 

O Bootstrap preve tres classes para estilizar com cores os rotulos e as bordas dos 
campos do formulario fornecendo ao usuario informa^ao sobre a valida^ao dos 
dados entrados no campo. 

Para cumprir criterios de acessibilidade forne^a, para as tecnologias assistivas 
e para usuarios imped idos de distinguir cores alternativas a cor conforme pres- 
creve as especifica^oes do W3C Em campos nao validados inclua a declaragio 

aria-inualid="true". 

As classes para estilizar com cores e suas finalidades sao listadas a seguir. 

• has-warning — Estiliza as bordas, o texto do rotulo e textos de ajuda do controle 
na cor #8a6d3b e indica que a valida^ao do campo resultou em um status de 
alerta. 

• has-error — Estiliza as bordas, o texto do rotulo e textos de ajuda do controle na 
cor #a94442e indica que a validagao do campo resultou cm um status de erro. 

• has-success— Estiliza as bordas, o texto do rotulo e textos de ajuda do controle 
na cor #3c763d e indica que a validagao do campo resultou cm um status de 
a<gao bem sucedida. 

Essas classes podem ser definidas para os rotulos dos controle, para os proprios 
controles ou para os containers marcados com a classe help-block. 

Voce pode visualizar os efeitos da defini^ao dessas classes consultando o arivro, 
mostrado a seguir. 

• HTML 

<div class="form-group has-success”> 

<label class= "control-label" for="sucesso''>Irpiit con sucesso</label> 
cinput type=''text 1 ' class="forn-control" id="sucesso"> 

</div> 

<div class="forn-grojp has-warning"> 

<label class="control-label" for="alerta">Input con alerta</label> 

<input type="text" class="forn-control" id="alert3"> 

</div> 

<div class="forn-grojp has-error "> 

<label class="control-label" for="erro">Input con erros/labels 
<input type="text" class="forn-control" id="erro"> 

</div> 
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<div class="has-success"> 

<dtv class="checkbox’^ 

<label> 

■cinput type="checkbox" id="checkboxSucesso" value="opcaol"> 
Checkbox con sucesso 
</label> 

</div> 

</div> 

<dtv class="has-warnuig"> 

<div class="checkbox'^ 

<label> 

cinput type="checkbox" id="checkboxAlerta" value="opcaol"> 

Checkbox con alerta 
</labels 
</div> 

</div> 

<div class= "has-error ,r > 

<div class="checkbox’^ 

<label> 

cinput type="checkbox" id-"checkboxErro" value="opcaol"> 

Checkbox con erro 
</label> 

</div> 

</div> 

[.../c3/estilizacao-estado-de-valida<ao.html] 


3.8.2 Validate com icones 

Adicionalmente ao uso de cores em campos valid ad os podemos incluir um icone 
dentro e a direita do carapo validado. Neste caso use a classe has-feedback como 
mosrrado no exemplo. 

A marca^ao tipica e as classes para incluir icones de validagao em campos de 
formulario e mostrada em destaque no exemplo a seguir. 

• HTML 

cdiv class="forn-grojp has-sucess has-feedback's 

dabel class= "control-"Label" for="sucesso’'slnput con sucessoc/labels 
<input type="text" class="fom-control" id="sucesso"> 
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<span class- 1 glyphicon glyphicon-ok forn-control-feedback" aria-hidden-'true":x/span> 

</div> 

<div class="forn-grojp has-warning has-feedback"> 

clabel class="control-label" for="alerta">Input con alerta</label> 
cinput type="text” class="forn-controi" id="alerta"> 

tspan class-'glyphicon glyphicon-warning-sign forn-control-feedback" aria- 
hidden-'true" ></span> 

</div> 

<div class="forn-group has-error has-feedback"> 

<label class="control-label" for="erro">Input con erro</label> 

<input type="text" class="forn-control" id="erro"> 

<span class-'glyphicon glyphicon-remove forn-control-feedback" aria-hidden="true"></ 
span> 

</div> 

[.../c3/ estilizacao-icones-de-validacao.html] 

Dica: Mais detalhes sob re icones do Bootstrap em [4.1] 


3.9Temas 

Ainda quc nao seja do escopo dcstc livro estudar a cria^ao de tcmas para o Boots¬ 
trap ao encerrar este capitulo vamos mencionar algumas facilidades que visam a 
criar temas para um projero desenvolvido com uso do Bootstrap. 

Con forme viraos no item [13] o download dos arquivos do Bootstrap nos fornece, 
alem de outros, o arquivo bootstrap.css e tambem sua versao minificada bootstrap, 
min.css. Este arquivo content todas as regras CSS para estiliza^ao dos inumeros 
seletores e componentes e foi criado para atender um tema cuja apresenta^ao e 
simples e ao mesmo tempo visualmente agradavei. 

O faro de o Bootstrap ser usado em larga escala no mundo todo faz com que 
uina aplica^ao ou site desenvolvido com uso do tema padrao seja imeditamente 
reconhecido e nao raro comparado com outros sites que tambem usam aqueie 
tema (eu diria que tornou-se um tema “batido” ou “manjado”). 

Tal como acontece com qualquer folha de estilo destinada a criar um visual para 
o site (um tema) o desenvolvedor podera altcrar a folha de estilo de modo a criar 
um tema personalizado. Por tratar-se de uma folha de estilos com mais de 6.500 
linhas em sua versao nao minificada, a tarefa de altera-la manualmcnte visando 
a criar um novo tema seria extremamente ardua. 
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Felizmente existem varios mecanismos que facilitam a tarefa conforme descritos 
a scguir. 

• Variaveis LESS - Encontra-se dispomvel no site do Bootstrap uma interface 
grafica destinada a alterar as variaveis LESS que geram a folha de estilos. A 
interface encontra-se cm http://getbootstrap.eom/customize/#less-variables. 

• Interfaces - Encontra-se dispomvel na internet varias interfaces graficas para 
personalizaijao e download de temas. Umas semelhantes a interface LESS 
do Bootstrap e outras de uso gratuito, mais intuitivo e simples. Entre estas 
indicamos a que se encontra em http://bootstrap-live-customizer.com/. Nela 
voce escolhe o componente a estilizar e ao alterar uma das propriedades 
CSS visualiza imediatamente scu efeito. Uma busca no Google pela palavra- 
-chave “Bootstrap themes generator” retorna intimeros links que fornecem 
interfaces geradoras de temas. 

• Temas prontos - Encontra-se disponivcl na internet varios temas prontos, sendo 
uns gratuitos e outros pagos. Este o caminho mais rapido para se encontrar 
um tema para o site pois na maioria dos casos e fornecida uma folha de 
estilos CSS minificada para download e basta que se substirua o link para 
a folha de estilo nativa por um link para a folha de estilo fornecida para o 
tema escohido. Ns do livrodos 1 mostram apontam para os arquivos dos 
exemplos aqui constantes criamos botoes que permitem escolher direntes 
temas. Os temas ali constantes sao gratuitos e for am obtidos em https:// 
bootswatch.com/. Uma busca no Google pela palavra-chave “Bootstrap the¬ 
mes” retorna inumeros links para sites que fornecem temas prontos para o 
Bootstrap. 
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Componentes 


Neste capitulo estudaremos os componentes de interface (ou widgets) do Boots¬ 
trap. Componentes sao criados com blocos de codigo padrao e classes de estilizagao 
previstas pelo Bootstrap de modo a renderizar o componente de forma apropriada 
ao padrao de estiliza^ao, ou tema, adotado pelo Bootstrap. Para cada componente 
examinaremos a marcagao HTMLtipica e as classes de estilizagao necessarias para 
render izagao correta do componente. Os componentes disponiveis e que serao 
estudados neste capitulo sao: icones, dropdowns, agrupamento de botoes, botoes 
dropdown, elementos de navega^ao, rotulos e marcadorcs, thumbnails, elementos 
tipograficos, alertas, barras de progresso, objctos de midia e classes genericas. 


4.1 leones 

O Bootstrap incorpora um conjunto de mais de 260 icones denominado 
Glyphicon Hal flings (http://glyphicons.com/) desenvolvido por terceiros e cedido 
por seus criadores para o Bootstrap. 

Trata-se de um conjunto de icones do tipo icon font que podera ser inserido com 
uso de qualquer elemento da tnarca^ao, que nao se destine a criar uma funciona- 
lidade do Bootstrap, isto e, o elemento nao devera confer qualquer par atributo/ 
valor especifico do Bootstrap. Em geral usa-se um elemento span para inserir icone 
inline e div para inserir icone nivel de bloco. 

O elemento que marca o icone devera estar vazio, ou seja, nenhum contetido 
devera ser inserido no elemento. 

Sao previstas duas classes para inserir icones: glyphicon e glyphicon-*, a primeira 
contem as regras CSS de estilizaqio geral, validas para todos os icones do Bootstrap 
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e a segunda define o icone a ser inserido. A marca^ao ripica para inserir uni icone 
e mostrada a seguir. 

<span class="gliphicon glyphicon-heart"></span> 

Esta marca^ao cria o icone de urn cora^ao (heart) na cor preta e com dimensoes 
confer me explicado a seguir. 

Icon font e um giifo, tal corao e qualquer fonte, portanto pode ser estilizado como 
fontes. Os icones sao na cor preta conforme a cor padrao do Bootstrap para fontes e 
suas dimensoes (e cores) sao as mesmas das fontes contidas no elemento que insere 
o icone, ou seja, cm tese, um icone inserido com uso de um elemento hi e maior do 
que um icone inserido com uso de um elemento p, e sua cor a mesma cor daqueles 
elementos. Mas, essa comparagao foi apenas para exemplificagao, nao insira icones 
com uso desses elementos, pois eles nao sao cabegalhos e muito tnenos paragrafos. 

Observe um exemplo real que comprova a comparagao feita. 

<hl>Coracao <span class="glyphicon glyphicon -heart"x/spanx/hl> 

<p>Coragao <span class=''glyphicon glyphicon-heart"></span></p> 

[,../c4/icones.html] 

Este exemplo encontra-se no site do livro, para consulta online. 

No primeiro caso o tamanho de fonte do elemento span e herdado do elemento 
hi c no segundo do mesmo acontece com o elemento p. 

Para alterar a cor do icone use a propriedade CSS color que altera cor das fontes. 
Observe a seguir alguns exemplos de alter agao de cores de icones. 

• CSS 

.glyphicon { color: red; } /* Altera globalnente a cor de todos os icones */ 

.glyphicon-heart { color: red; } /* Altera globalnente a cor de un deterninado icone */ 

Podcmos usar uma das classes de cores contextuais conforme descritas em [3.7.1 ] 
para alterar a cor de um icone, conforme mostrado a seguir. 

<p>Coragao <span class=’'glyphicon glyphicon-heart text-info"x/span></p> 

Podemos usar uma classe personalizada para alterar a cor de um icone. A classe 
sera estilizada com uso de CSS na cor escolhida pelo autor. 

<p>Corat^ao <span class-'glyphicon glyphicon-heart cor-un"x/spanx/p> 

Tal como acontece com a cor de qualquer fonte, se nao for cxplicitamente definida 
uma cor para o elemento que insere o icone, ele icone, herda a cor do elemento-pai. 
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Se por um motivo qualquer voce precisar alterar as dimensoes do icone use 
a propriedade CSS font-size que altera tamanho de fontes e proceda ral como 
fizemos para alterar a cor do icone. Para as dimensoes do (cone, a heranga CSS 
tarabem e valida. 

Para uma lista completa dos icones e suas classes para insergao consulte 
h ttp'J/getbootstrap. com/co mpon en ts/#glyphicons. 


4.2 Dropdown e dropup 

Convem ressaltar que para possibilitar o funcionamento do menu dropdown e 
necessario incluir na pagina que recebera o menu a biblioteca j Query, o plugin 
do Bootstrap para dropdown {esta no arquivo bootstrap.mm.js) conforme mostrado 
cm [1.4]. 

Amarcagao HTML tipica, a definigao das classes dropdown e dropup e dos atributos 
dos elcmentos de marcagao necessarios para estilizar e fazer funcionar uni menu 
dropdown (abre submenu para baixo) e outro dropup (abre submenu para cima) 
sao mostrados a seguir. 

• HTML 

1. <div class="dropdown"> <1-- Menu abre para baixo --> 

2. <button class="btn btn-prinary dropdown-toggle 1 ' type="button" id="dropDownl" 
data-toggle="dropdown’' aria-expanded=''true">Frutas <span class= "caret'></span></button> 

3. <ul class-'dropdown-nenu" role=”nenu" aria-labelledby="dropDownl''> 

4. <li role=’'presentation"xa role= ,, neru-iteii 1 ' href=''#" tabindex="-1 ">Abacaxi</ax/li> 

5. <U role=’'presentation"><a role="nieru-iten" href="#" tabirdex="-l">Lararja</a></U> 

6. <li role= "presentation"><a role="Fienu-iten" href="#'' tabindex="-1 ">Maga</ax/li> 

7. <li class="divider"x/li> 

B. <U role="presentation''><a role="nenu-iten" href= r ’#" tabindex="-l">Outras.. .</ax/li> 

9. </ul> 

10. </div> <!-- /.dropdown --> 

11. <div class="dropup"> <1-- Menu abre para cina --> 

12. <button class="btn btn-prinary dropdown-toggle" type= "button” id="dropllpl" 
data-toggle= ,l dropdo* i m 1 ' aria-expanded= "true">Frutas <span class="caret'x/span></button> 

13. <1-- identico ao anterior --> 

14. </div> <!-- /.dropjp 

[.../c4/d ropdown-dropup.html] 
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Codigo comentado: 


Linha(s) Descriqio 


Linhas 1 e 10 
Linha 2 


Linhas 3 e 9 

Linhas 4 a 8 
Linha 7 

Linhas 11 a 14 
Linha 12 


Para obter o efeito dropdown e necessario criar um div container e a 
ele definir class=dropdown. Esse div sera o container geral do dropdown. 

Aqui inseri mos o elemento que ao ser clicado fara o menu abrir (no caso 
um botao). Esse elemento devera receber o atributo data-toggle= "dropdown", 
pois atributos data - * sao a referenda para que o plugin dropdown que foi 
incorporado a pagina juntamente com a bibliotecaj Query identifique 
e faqa funcionar o dropdown. 

Elemento ul container dos links do menu dropdown. Esse container 
devera receber o atributo das s="dropdown -rrenu". 

Elementos li (itens da lista) containers dos links do menu. 

Aqui um elemen to U (item da lista) vazio com a atributo class=’ l divider' 1 . 
Essa classe quando aplicada a um dos itens da lista que esteja vazio, 
cria uma linha horizontal cinza divisoria dos itens. 

Cria um menu dropup de modo identico ao anterior. Esse menu abre 
para cima. 

Marca^ao do botao para acionar o menu dropdown. As classes aqui 
contidas foram estudadas na linha 2. 


Na figura 4.1 mostramos a render iza^ao dos dois menus, con forme marca^ao 
HTML anterior. 



Figura 4.1 - Menus dropdown e dropup. 

No nosso exemplo usamos um elemento button, teoricamente voce pode usar 
qualquer elemento HTML para acionar a abertura do menu, mas e claro, devera 
escolher o elemento mais apropriado e semantico. 
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Dica: Alguns componentes estudados neste capitulo dependem da inclusao de 
plugins para funcionar. Nesses casos o Bootstrap preve um atributo do tipo data-* 
com um valor declarado, que chama automaticamente o metodo do plugin no 
elemento ao qual foi aplicado. Como regra geral, sempre que voce encontrar um 
atributo data-* na marcaqao, ele tern a fun^ao de chamar um plugin. Em geral 
o valor desse atributo e o nome do plugin (ver linha 2 do codigo comentado 
anteriormente). No capitulo 5 estudaremos, com detalhes, os plugins. 


4.2.1 Alinhamento, titulo e item desabilitado 

For padrao, os componentes do Bootstrap sao aiinhados a esqucrda segundo a 
convengao de escrita para idiomas ocidentais. Esta previsto um valor para o atri¬ 
buto classe, denoniinado dropdown-nenu-right, a ser declarado para o container dos 
itens do menu e que se destina a alinhar os itens do menu a direita com aplica^ao 
da declaragao CSS float: right;. 

Para inserir um titulo em um conjunto de itens do menu use a classe dropdow-header 
conforme marca^ao mosrrada a seguir. 

<li role="presentation" class="dropdown-header">Titulo dos itens</li> 

Para desabilitar um item do menu use a classe disabled conforme marca^ao mos- 
trada a seguir. 

<U role= "presentation" class="disabled">Iten desabiUtado</li> 

O exemplo a seguir mostra a mesina marca^ao HTML do exemplo anterior para 
o menu dropup com a defini^ao das classes para alinhar os itens do menu a di¬ 
reita, para criar um titulo para um conjunto de itens e para desabilitar um item. 

• HTML 

<div class="dropup"> 

ebutton class="btn btn-primary dropdown-toggle" type= "button" id="dropDownl" 

data-toggle="dropdown" aria-expanded="trje">Frutas <span cla s s="c a ret" ></ spanx/button > 
<ul class= "dropdown-nenu dropdown-nenu-right” role="nenu" an.3Tabelledby="dropDownr> 
<li role= "presentation" class="dropdown-header">Frutas especificas</U> 

<U role="presentation"xa role-'nenu-iten” href="#" tabindex="-T'>Abacaxi</ax/li> 
<li role= "presentation" class= "disabled"xa role="nenu-iten" href="#" 
tabindex=" - l">Laran ja</ax/li> 

<li role= "presentation "xa role="nenu-iten" href="#" tabindex=" -1">Haga</ax/li> 
<li class="divider "x/li> 
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<11 role="presentation"xa role-'pienu-iten 1 ' href-'#" tabindex="-r>0utras.. .</ax/li> 

</ul> 

</dlv> <1-- /.dropdown --> 

[.../c4/d ropdown-alinhamento-tituio-item-desabilitado.html] 


43 Agrupamento de botoes 

O Bootstrap preve as classes btn-group, btn-group-vertlcal e btn-toolbar destinadas 
a criar agrupamentos de botoes. A seguir veremos cada uma dessas classes, sua 
aplica^ao e finalidade. 


4.3.1 Agrupamento em linha 

Para agrupar botoes em linha basta criar um div container para os botoes e a ele 
definir a classe btn-group e o atributo role conforme mostrado a seguir. 

• HTML 

<dlv class="btn-group" role="group"> 

<button type="button" class="btn btn-prlriary">Novo</button> 
cbutton type="button" cl3ss='btn btn-primary">Abrir</button> 

<button type="button" class=' [ btn btn-prlriary">Fechar</button> 
cbutton type="button" class="btn btn-primary">Salva 
cbutton type="button" class="btn btn-primary">Salvarc/button> 

</div> 

[.../c4/agrupamento-de-botoes.html] 


4.3.2 Agrupamento vertical 

Para agrupar botoes na vertical basta criar um div container para os botoes e a ele 
definir a classe btn-btn-group-vertlcal conforme mostrado a seguir. 

• HTML 

<div class="btn-group-vertical" role-'group"> 

■cbutton type= "button" class="btn btn-primary">Novo</button> 

<button type="button" class="btn btn-primary''>Abrir</button> 

■cbutton type= "button" class="btn btn-primary">Fecharc/button> 
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cbutton type= "button" class=' r btn btn-primary">Salvar</button> 
</div> 

[.../c4/agrupamento-de-botoes.html] 


4.3.3 Agrupamento barra de ferramentas 

Para criar multiplos grupos de botoes basta criar urn div container para todos os 
agrupamentos de botoes (como estudados anteriormente) e a ele definir a classe 
btn-toolbar e role= "toolbar" conforrne raostrado a seguir. 

• HTML 

<dlv class="btn-toolbar" role="toolbar"> 

cbutton type="button” cl3ss="btn btn-prinary">Movo</button> 
cbutton type="button" cl3ss="btn btn-prinary">Abrir</button> 

<button type="button" cl3ss="btn btn-prinary">Fechar</button> 
cbutton type="button" class-'btn b tn - p rirta r y" >Salv a r</button:* 

</div> 

[.../c4/agrupamento-de-botoes.html] 

Na figura 4.2 raostramos a renderizaqao dos tres casos de agrupamento de botoes, 
conforrne marca^oes HTML anteriores. 


4.3.4 Agrupamento justificado 

Para agrupar botoes em linha de modo que eles se expandam com igual largura 
e ocupem toda a largura do container basta criar urn div container para cada urn 
dos botoes e um div container geral definindo para ele as classes btn-group e btn- 
group-justified e o atributo role conforrne mostrado a seguir. 

• HTML 

<div class="btn-group btn-group-justified" role="group"> 
ediv class="btn-group role="group"> 

cbutton type="button" class=' r btn btn-prinary">tJovo</button> 

</div> 

ediv class="btn-group role="group"> 

cbutton type="button" class=' r btn btn-prinary">Abrirc/button> 

</div> 
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<div class="btn-group role="group"> 

<button type="button" class="btn b tn-p rima r y"> Fe cha r</button> 

</div> 

<dtv class="btn-group role="group"> 

<button type="button" class="btn btn-primary">Salvar</buttons 
</div> 

</’div> 

[.../c4/agrupamento-de-botoes.html] 


4.3.5 Dimensionamento 

Conforme estudamos no item [3.5.12] por padrao, os botoes sao estilizados com 
um padding que determina suas dimensoes. Em um agrupamento de botoes as 
classes .btn-group-lg, .btn-group-sm e .btn-group-xs, possibilitam que se altere aqucle 
valor padrao de padding e se obtenha botoes com dimensoes maiores, menores e 
muito menores que o botao padrao respectivamente. 

A marca^ao HTML para criar tais botoes e conforme a seguir. 

• HTML 

<div class="btn- group btn- group-Ig' 1 role=’'group" aria Tabel=" Large button group"> 

<button type= "button" class=' [ btn btn-success">novo</button> 
cbutton type="button" class="btn btn-success">abrir</button> 

<button type="button" class="btn btn-success">fechar</button> 

<button type="button" class="btn btn-success">salvar</button> 

</div> 

<div class="btn-group" role="group" aria-label="Default button group"> 

<!-- iden --> 

</div> 

<div class="btn-group btn-group- sfi" role="group" aria-label= "Medium button group"> 

<!-- idem --> 

</div> 

«div class= "btn-group btn-group-xs" role= "group" aria-iabel=’'Spiall button group"> 

<!-- idem --> 

</'div> 

[.../c4/agrupamento-de-botoes.html] 
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Observe na figura 4.2 os diferentes tipos de agrupamento de botoes e seu dimen- 
sionamento, conforrae as marcagoes mostradas no item [43]. 


,btn-group .btn-gfdup-vertical . btn-toolbar 


r Neve I vMonr I -ccrar I ba 

i?3tvar 


,bt n-group ,bto-group- 5usb ifi e cf 


hJoviQ Abrir Fechai Safvar 


. btn-group - lg, .btn-group . btn-group-am 


novo abrir fechar salvar 

11 

novo abrir recnar sai^ar 


novo abrir fechar 






_ b-t n — | 


group- 


Figura 4.2 - Agrupamento de botoes. 


4.4 Botoes dropdown 

Convem ressaltar que para possibilitar o funcionamento de ura botao dropdown 
e necessario incluir na pagina que recebera o botao a biblioteca jQuery, o plugin 
do Bootstrap para dropdown (esta no arquivo bootstmp.min.js) confer me mostrado 
cm [1.4]. 

Vejamos a seguir os casos possiveis de combinagoes para criar menus dropdown 
com botoes. 


4.4.1 Botoes dropdown simples 

Para criar um botao dropdown simples usamos ura container geral com a classe 
btn-group. O botao e criado com qualqucr uma das marcagoes para criar botoes 
como mostrado em [3.5.1.2] e a ele deve ser definida a classe dropdown-toggle e o 
par ambitto/valor data-toggle="dropdown". A lista de links deve ser marcada com um 
elemento ul que recebe a classe dropdown-nenu. 

A marcagao HTML tipica para criar um botao dropdown, confer me descrito, e 
mostrada a seguir. 
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• HTML 

cdiv class="btn-group"> 

cbutton type="button” class="btn btn-default dropdown-toggle" data-toggle="dropdown" 
aria-expanded=’'false”> 

EDITAR <span class="caret"x/span> 

</button> 

<ul elass="dropdown-Fienu" role="nenu"> 
clixa href="#">novoc/ax/U> 

<Uxa href=' l #">abrir</ax/U> 

<lixa href=' #">fechar</ax/U> 

<li class="divider"x/li> 

<Uxa href = " >sa l varc/ax/li> 

</ul> 

</div> 

[„./c4/botoes-d ropdown.html] 


4.4.2 Botoes com fcone de abertura separado 

Para criar urn botao dropdown simples como fcone de abertura separado usa-se 
a mesma marcagao HTML anterior com acrescimo de urn novo botao contendo 
o seu texto, confer me destacado no codigo a seguir. 

• HTML 

cdiv class="btn-group"> 

<button type="button" class- 1 btn btn-default>EDITAR</button> 

<button type= "button" class= ,[ btn btn-default dropdown-toggle" data-toggle= "dropdown" 
aria-expanded="false"> 

EDITA R <span class="caret"></spans 
</button> 

<ul class= "dropdown-menu" role="fienu"> 
clixa href = "#">novo</ax/U> 

<lixa href="#">abrir</ax/li> 
clixa href="#">fecharc/ax/U> 

<li class= ,l divider"x/li> 
clixa href="#">salvarc/ax/li> 

</ul> 

</div> 

[,../c4/botoes-dro pdown.html] 
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4.4.3 Botoes com fcone de abertura Glyphicon e integrado 

A marca^ao HTML tipica para criar o icones glyphicon integrados aos botoes 
consiste em se substituir a marea 910 do icone de abertura padrao pela marca^ao 
do icone glyphicon conferinc mostrado em destaque a seguir. 

• HTML 

<dlv class="btn- group Ir > 

<button type="button" class="btn btn-default>EDITAR</button> 
ebutton type="button” class="btn btn-default dropdown-toggle" 
data-toggle-'dropdown" arla-expanded="false"> 

<sp a n cl a s5 = ' l c a r e t' l ></spBn» 

<span class="glyphicon glyphicon-pencil"></span> 

</button> 

cut. class="dropdown-nenu" role="nenu"> 

<lixa href ="#">novo</ax/U> 

<lixa href=’ l # ,, >abrir</ax/li> 

<lixa href="#">fechar</ax/li> 

<U class=''divider"x/li> 

<Uxa href= ,l #">salvar</ax/li> 

</ul> 

</'div> 

[„./c4/botoes-dro pdown.html] 


4.4.4 Dimensionamento 

Conforine estudamos no item [3.5.1.2] por padrao, os botoes sao estilizados com 
urn padding que determina suas dimensoes. O uso das classes .btn-group-lg, .btn- 
group-sn e .btn-group-xs, possibilita que se altere aquelc valor padrao de padding e se 
obtenha botoes com dimensoes maiores, menores e muito menores que o botao 
padrao respectivamente. Ver [4.3.5] para exempio de uso destas classes. 


4.4.5 Botao drop up 

E possivel inverter o sentido de abertura do botao dropdown com uso da classe 
dropup no container geral do botao como mostrado a seguir. 
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• HTML 

<div class="btn-group dropup"> 

<!-- narcagao tipica corn nostrada nos exertplos anteriores --> 

</div> 

Observe na figura 43 os diferentes tipos add-on de texto e botoes dropdown, 
conforme as marcagoes mostradas no item [4.4], 
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Figura 4.3 - Bo foes dropdown . 


4.5 Controle input com add-on 

O Bootstrap preve funcionalidades que permitem iuserir texto de ajuda (ou com- 
plementar) e botoes, antes, depois ou niestno ern ambas as extremidades (antes e 
depois) dos controles (campos) de formulario input para entrada de textos. 

Convem ressalrar que para possibilitar a insergao e necessario incluir na pagina 
que recebera o controle a biblioteca jQuery, o plugin do Bootstrap para dropdown 
(esta no arquivo bootstrap.min.js) conforme mostrado em [1.4]. 

Vejamos a seguir os casos possiveis de combina^oes para insergao em controles 

input. 


4.5.1 Texto add-on 

Para obter esses efeitos o Bootstrap preve a classe input-group a ser declarada em 
um elemento div container para o texto e o campo input. E prevista tambem a 
classe input-group-addon a ser declarada em um elemento span container para o texto. 
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A marca^ao HTML para mostrar a renderiza^ao estilizada para esses casos e 
conforrae a seguir. 

• HTML 

<!-- Texto integrado antes --> 

<div class="input-group"> 

<span class="input-group-addon" id="addonl , '>@</ , span> 

<input type="text" class="fom-control" placeholder "Twitter" 
aria-describedby="addonl"> 

</div> 

<!-- Texto integrado depois --> 

<div class="input-group"> 

<input type="text" class="forn-control" placeholder="Seu enail" 
aria-describedby="addon2"> 

<span class="input-group-addon" id=" ad don2" >(3 gnail. c on</span> 

</div> 

<!-- Texto integrado antes e depois --> 

<div class="input-group"> 

<span class="input-group-addon">R$</span> 

<input type="text'' class="fom-controi" placeholder= "Total da sua conpra" 
aria-label="Valor en reais"> 

<span class="input-group-addon">,00</span> 

</div> 

[..,/c4/input-com-add-on.html] 

Notar que ordera de declara^ao dos elementos span e input e importance para 
a correta renderiza^ao do texto na sua posi^ao (antes, depois ou em ambos os 
lados do controle). 


4.5.2 Botao simples add-on 

Assim como vimos para textos no item anterior, os controles input para textos po- 
dem ser estilizados com uso de botoes integrado antes ou depois do campo input. 

Para obter esses efeitos o Bootstrap preve a classe input -group-btn a ser declarada 
no eiemcnto span container para o botao. 

A marca^ao HTML para mostrar a inser^ao de botao simples antes e depois do 
controle e conforme a seguir. 
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• HTML 

<!-- Botao sinples antes --> 

<div class="input-group"> 

cspan class="input-group-btn"> 

<button class="btn btn-default" type="button">IR</button> 

</span> 

<input type="text" class-'forn-control" placeholder="CPF"> 

</div> 

<!-- Botao sinples depois --> 

<div class="input-group"> 

<input type="text" class="forn-control" placeholder="Palavra-chave"> 

<span class="input-group-btn ,r > 

cbutton class="btn btn-default" type="button">BUSCARc/button> 

</span> 

</div> 

[.../c4/input-com-add-on.html] 

Notar que ordem de declara^ao dos elementos que marcam o botao e o campo 
input e importante para a correta rendcriza^ao do botao na sua posi^ao. 


4.5.3 Botao dropdown add-on 

Assim como virnos para botoes simples no item anterior, os controlcs input para 
textos podem ser estilizados com uso de botoes dropdown integrado antes ou 
depois do campo input. O botao dropdown deve estar contido em urn div com a 
classe input-group-btn. 

Para obter esses efeitos basta que se declare a marca^ao HTMLtipica para botoes 
dropdown em lugar de botoes simples. 

A marca<;ao HTML para mostrar a inser^ao de botao dropdown antes e depois 
do controle e conforme a seguir. 

• HTML 

<!-- Botao dropdown antes --> 

<div class="input-group"> 

<div class="input-group-btn"> 

^button type="button" class="btn btn-default">CONTATQSc/button> 
cbutton type= "button" class=' r btn btn-default dropdown-toggle" 
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data-toggle='dropdown" aria-expanded="false"> 

<span class="glyphicon glyphicon-envelope"x/span> 

</button> 

<ul class="dropdown-nenu" role="nenu"> 

<lixa href="#">upi</ax/li> 

<lixa href="#">dois</ax/li> 
clixa href="#">tres</ax/li> 

<VL class="divider "x/li> 
clixa href="#">quatro</ax/li> 

</ul> 

</div> 

<input type="text" c las s^forn-control" placeholder="Contatos"> 

</div> 

<!-- Botao dropdown depois --> 

<div class="input-group"> 

<input type="text" class="forn-control" placeholder="Fauoritos"> 
cdiv class="input-group-btn"> 

cbutton type="button" class="btn btn-default">FAVORITOS</button> 

<!-- identi 

[,../c4/input-com-add-on.html] 

Notar que ordem de declaragao dos elementos que marcam o botao c o campo 
input e importante para a correta renderiza^ao do botao na sua posiqao. 

Observe na figura 4.4 os diferentes tipos de add-on eni controles input, conforme 
as marca^oes mostradas no item [4.5], 



Figura 4.4 - Input com add-on. 
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4.6 Navega^ao 

As funcionalidades de navegagao previstas pclo Bootstrap sao: abas e pills (lista 
de links simples). A marcagao padrao para criar estes dois tipos de navegagao 
consiste de urn container ul com a classe nav e seus elementos U. As classes nav- 
tabs e nav-pills criam, respectivamente, os dois tipos de navegagao. 

Observe a marcagao tipica como citada e que sera usada nos exemplos de nave¬ 
gagao constantes deste item do livro. 

• HTML 

<ul cUss="nav"> 

<li role= "presentation" class="active"xa href="#">Hone</ax/li> 

<li role= "presentation "xa href="#">Portf6lio</ax/li> 

<U role= "presentation "xa href="#”>Artigos</ax/li> 

<li role= "presentation "xa href="#">Contato</ax/li> 

</ul> 


4.6.1 Aba basica 

Para criar um mecanismo de navegagao do tipo abas basta acrescentar a classe 
nav-tabs ao container ul da marcagao padrao mostrada anteriormente. 

• HTML 

<ul class="nav nav-tabs"> 

<li role= "presentation" class="active''xa href="#">Hone</ax/li> 

<li role= "presentation "xa href="#">Portfolio</ ax/li> 

<li role= "presentation "xa href="#">Artigos</ax/li> 

<li role="presentati 

</ul> 

[,../c4/na vegaca o. htm I] 
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4.6.2 Aba desabilitada 

Para desabilitar uraa aba defina a classc disabled para elemento It que marca o link. 


• HTML 

<ul class="nav nav-tabs"> 

<li role= "presentation" class="active"xa href= , '#">Hone</ax/li> 

<li role= "presentation "xa href="#">Portfolio</ax/li> 

<li role= "presentation" class= M disabled M xa href ="#">A rtigos</a x/li> 
<li role="presentat> 

</ul> 

[,../c4/na vegaca o. htm I] 


4.6.3 Aba com link dropdown 

Para mar uma aba com link dropdown defina a classe dropdown para elemento li 
que marca a aba e crie a marca^ao padrao para link dropdown dentro daquele 
elemento li confer me mostrado a seguir. 

• HTML 

<ul class="nav nav-tabs"> 

<li role= "presentation" class="active"xa href="#">Hone</ax/li> 

<li role= "presentation "xa href="#">Portfolio</ax/li> 

<li role="presentation" class="dropdown"> 

<a class="dropdown-toggle" data-toggle-'dropdown" href="#" role="button" 
aria-expanded="false"> 

Artigos <span class= n caret"x/span></a> 

<ul class="dropdown-nenu" role="nenu"> 
clixa href="#">HTML</ax/U> 

<Uxa href-'#">CSS«/ax/U> 

<Uxa href= TI #">javascript</ax/li> 
c/uls* 

</li> 

<li role= "presently 

</ul> 

[„./c4/na vegaca o. htm I] 


Conheca os livros do Maujor: http://livrosdomaujor.com.br 


124 


Boostrap 3.3.5 


4.6.4 Abas justificadas 

Para justificar as abas defina a classe nav-justified para elemento ul container das 
abas. Justificar tem o cfeiro de fazer com que as abas renham a mesma largura e 
se es tend am por toda a largura do container no qual for am inseridas. 

• HTML 

<ul class="nav nav-tabs nav- justified "> 

<li role= "presentation" class=''active"xa href =" #" >Hone< / ax/li > 

<li role= "presentation "xa href="#">Portfolio</ax/li> 

<li role="presentation ,, xa href="#">Artigos</'ax/li> 

<li role="prese</li> 

</ul> 

[.../c4/na vegaca o. htm I] 


4.6.5 Pills 

Amarca^ao para criar a navegagao tipo pills e identica a mostrada para criar tabs. 
Basta substituir a classe nav-tabs pela classe nav-pills. O exemplo mostrando todos 
os casos de navega^ao estudados nos itens anteriores encontra-se online. 

Observe na figura 4.5 os diferentes tipos de navegagao, con forme as marca^oes 
mostradas no item [4.6], 



Figura 4.5 - Navegagao tipos abas e pills. 
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4.7 Barra de navega^ao 

O Bootstrap preve funcionalidades que permitem criar uma grande variedade de 
barras de navega^ao contendo nao somente links, mas imagens, textos, caixas de 
busca, elementos de formulario, dropdown etc. As barras podem ainda ser fixas 
no topo on rodape da aplica^ao ou rolar com o conteudo. Neste item veremos 
todas as possibilidades de criagao de barras de navcgaqao. 

As barras de navega^ao sao rcsponsivas, como sao todos os componentes do 
Bootstrap. Barras de navegagao sao dispostas na horizontal em larguras de view¬ 
port acima de 768px. Abaixo desta largura as barras de navega^ao assumem uma 
disposi^ao vertical tipica da navegagao movel com um krone tipo hamburger para 
revelar os links. Ao visualizar os exemplos redimensione a janela do navegador e 
observe o comportamento das diferentes barras de navega^ao mosrradas. 

O container geral de barras de navega^ao devera ser o elemento nav, contudo se 
por qualquer motivo for necessario usar-se outro elemento, tal como um div de¬ 
vera ser, para ele container, definido o par atributo/valor role^Yiavigation 1 ' servido 
para tecnologias assistivas. 

Convem ressaltar que para possibilitar o funcionamento das barras de navega- 
^ao e necessario incluir na pagina que recebcra o botao a biblioteca j Query, o 
plugin do Bootstrap para dropdown (esta no arquivo bootstmp.mm.js) conforme 
mostrado em [1.4]. 

4.7.1 Barra de navega^ao basica 

Trara-se de uma barra de navegaqao contendo um ritulo (em geral o none ou o 
logo tipo da aplicagao) e links. 

Observe a marca^ao tipica para criar uma barra de navcga^ao basica. 

• HTML 

1. <nav class-’navbar navbar-default"> 

2. <div class= "container-fluid"> 

3. <div class="navbar-header"> 

4. ^button type="button" class="navbar-toggle collapsed" data-toggle=''collapse" 

data-target="ttbar raBastca"> 

5. <span class="sr-only r, >Toggle navigation*;/span> 

6. <span class="icon-bar"x/span> 

7. <span class="icon-bar"x/span> 
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8. <span class="icon-bar"x/span> 

9. </button> 

10. <a class="navbar-brand" href="#">Site</a> 

11. </dlv> 

12. <div class=’’collapse navbar-collapse” ld= , 'barraBaslca l, > 

13. <ul class="nav navbar-nav"> 

14. <U class="active”xa href=''#">Hopie <span class= M sr-only ">( current )</sparx/ax/li> 

15. clixa href="fi">Portfolio</ax/li> 

16. <lixa href="#">Haterias</ax/li> 

17. clixa href="#">Contato</ax/li> 

18. </ul> 

19. </'divx!-- /.navbar-collapse --> 

21. </nav> 


[.../c4/barra-de- navegacao.html] 

Codigo comentado: 


Linha(s) Descrigao 


Linhas 1 e 21 


Linha 2 


Linhas 3 e 11 

Linhas 4 a 9 
Linha 5 

Linhas 6 a 8 
Linha 10 


Elemento nav container da barra de navegagao. Definir para este con¬ 
tainer as classes navbar e navbar-default. For padrao o fundo da barra de 
navega^ao e ein cor clara. Se definirmos a classe navbar-inverse em lugar 
da classe navbar-default o fundo da barra sera em cor escura. 

Logo apos o elemento nav deve ser marcado um elemento div com classe 
container ou container-fluid. A escolha de uma ou outra classe determina 
a largura total da barra. Se quisermos que a barra ocupe toda a largura 
da viewport, em qualquer situaqao, o elemento nav deve ser colocado 
corao elemento-filho de body e nao dentro de div. row e neste caso usa- 
-se a classe container-fluid caso contrarontainer. No exemplo disponivel 
online no site do livro mostramos as duas sit undoes. 

Container para o ritulo do site e para o icone hamburger que aparece 
em dispositivos moveis. 

Botao do icone hamburger. 

Dica para recnologias assistivas. Notar a classe sr-only mostrar este 
conteiido somente para aquelas tecnologias. Ver [1.7], 

Classe icon -bar para criar as tres linhas do icone hamburger. 

Titulo do site, O destino desre link deve ser a home-page do site. Se em 
lugar do titulo do site voce decidir por colocar uma pequena imagem 
(20px x 20px) do logotipo ou marca do site substitua o texto do link 
por um elemento ing com o endereco do logotipo. 
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Linha(s) Descrigao (cant.) 

Linhas 12 a 19 Container para o elemento ul que marca os links da barra de navegagao. 

Notar queo valor do atributo id deste container eomesmo doatributo 
data-target do botao na Iinha 4. 

Linhas 14 Marcar dinamicamente o elemento U container do link para a pagina 

atual com a ciasse active estiliza o link diferenciadamente indicando 
visualmente que aquele link e o da pagina atual. Neste caso use a 
ciasse sr-only (ver [1.7]) para fornecer a inesma indicagao as tecnologias 
assistivas. Marca os links da barra de navegagao. Notar que o valor do 
atributo id deste. 

O exemplo pratico mostrando a construgao de barras de navegagao basicas 
encontra-se disponivel, no site do iivro, para consulta online. Ao visualizar o 
exemplo redimensione a janela do navegador para observar o comportamento 
da barra em dispositivos com pequenas larguras de viewport (abaixo de 768px). 

Observe na figura 4,6 os diferentes tipos de barra de navegagao, conforme as 
marcagoes mostradas no item [4.7.1]. 


Sit® Home Portfolio Malerias Cantata- 


Barra navbar-default 


Sits 

Home 

Portfolio 

Materia* 

Cantata 





Barra navbar-default com logotipo 

□ 

HOElCie 

Portfolio 

Mate na s 

contalD 

Barra navbar-inverse 

Site 

Home 

Portfolio 

Materia* 

Conlafo 


Figura 4 jS - Barra de navegagao bdsica. 


4.7.2 Barra de navegagao fixa 

Por padrao a barra de navegagao rola acompanhando a rolagem da tela. As classes 
navbar-fixed-top e navbar-fixed-botton quando declaradas para o elemento nav que marca 
a barra faz com que ela, barra permanega fixa na borda superior ou na borda 
inferior da tela, ou seja, nao rola com a tela. 


Conheca os livros do Maujor: http://livrosdomaujor.com.br 







128 


Boostrap 3.3.5 


Observe a marea^ao ripica para criar uma barra de navega^ao fixa. 

• HTML 

<nav class="navbar navbar-default navbar-fixed-top"> /* Fixa na borda superior da tela */ 


ou 


<nav class="navbar navbar-default navbar-fixed-button"> /* fixa na borda inferior da tela */ 


[,../c4/barra-de-navegacao-fixa.html] 

O cxemplo pratico mostrando a constru^ao de barras de navegagao fixas encontra- 
-se disponivel, no site do iivro, para consulta online. Ao visualizar o exemplo 
redimensione a janela do navegador para observar o comportamcnro da barra 
cm dispositivos com pequenas larguras de viewport (abaixo de 768px). 

Observe na figura 4.7 as barras de navega^ao fixas, confer me as marcagoes mos- 
tradas no item [4.7.2]. 


Sit© Home Portfolio Materias Contato 

bla ...bla ...bla... 
bla.bla.bla... 
bla...bla...bla... 
bla...bla...bla... 
bla...bla...bla... 
bla...bla...bla... 
bla...bla..,.bla... 

Site Home Portfolio Materias Contato 


□ 


Figura 4.7 - Barra de navega^do fixa. 


Alerta A altura padrao de uma barra de navega^ao e de 50px. Assim, quando se 
preve barra de navegacao fixa na pagina e necessario que se declare explicitamente 
para o elemento body da pagina um padding-top de 50px. 
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4.7.3 Barra de navega^ao com caixa de busca 

E pratica comum e amplamente utilizada inserir uma caixa de busca na barra de 
navegagao. O Bootstrap preve a classc navbar -fom a ser declarada no elemento fora, 
container da caixa de busca, para essa insenjao. Adidonalmente use as classes 
gerais navbar-left e navbar-right para posicionar a caixa de busca a esquerda ou a 
direita da barra de navega^ao respectivamente. 

A marca^ao HTML tipica para inserir uma caixa de busca era uma barra de na- 
vega^ao e mostrada cm destaque a seguir. 

• HTML 

<nav class="n3vbar navbar-default"> 

<div class="collapse navbar-collapse" id="barraCortBusca"> 

<forn class-'navbar-forn navbar-right" role="search"> 

<div class="forFi-group"> 

<input type= T, text" class="forn- control" placeholder="Seafch TI > 

</div> 

cbutton type="subpiit" class=" 

</forn> 

</'nav> 

[.../c4/barra-navegacao-com-complementos.html] 


4.7.4 Barra de navega^ao com botao 

O Bootstrap preve a classc navbar-btn a ser declarada no elemento button para inserir 
urn botao na barra de navegagao. Adidonalmente use as classes gerais pull-left e 
pull-right para posicionar o botao a esquerda ou a direita na barra de navegaqao 
respectivamente. 

A marcaqro HTML tipica para inserir urn botao era uma barra de navega^ao e 
mostrada em destaque a seguir. 

• HTML 

<nav class="navbar navbar- default"> 

</ul> 
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cbutton type= "button" class=' r btn btn-default navbar-btn pull-right’'>Login</button> 
</divx!-- /.navbar-collapse --> 

</nav> 

[.../c4/barra-navegacao-com-complementos.html] 


4.7.5 Barra de navega^ao com link dropdown 

Afuncionalidade link dropdown foi estudada no item [4.6.3] e aplica-se as barras 
de navega^ao. Para esrilizar dropdown esta prevista uma marea 910 HTMLpadrao. 
Aclassc dropdown deve ser declarada para o elemento li que marca o link dropdown. 

A marca^ao HTML tipica para criar um link dropdown cm uma barra de nave- 
ga^ao e mostrada em destaque a seguir. 

• HTML 

<nav class="navbar"> 

<li class="active "><a href="#">Hone <span class="sr-only ">( current )</spanx/ax/li> 
clixa href="#">Portf6lio</ax/ll> 

<li class=" dropdown" > 

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
aria-exparded="false">Artigos <span class - 1 caret"x/spanx/a> 

<ul class="dropdown-nenu" role="nenu"> 

<lixa href="#">HTHL</ax/U> 
clixa href="#">CSS</ax/U> 

<lixa href= TI #">javascript</ax/li»Contato</ax/li> 


</nav> 

[.../c4/barra-navegacao-com-complementos.html] 


4.7.6 Barra de navega^ao com texto 

Para inserir um texto em uma barra de navega^ao use o elemento p (paragrafo) 
e a ele defina a classe navbar-text. Use as classes gerais pull-left e pull- right para 
posicionar o botao a esquerda ou a direita na barra de navega^ao respectivamente. 

Amarca^ao HTML tipica para criar textos em uma barra de navega^ao e mostrada 
em destaque a seguir. 
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• HTML 

<nav class="navbar"> 


<li class- 1 active"><a href="#">Hone <span class="sr-only">(current)</spanx/ax/U> 
<lixa href="#">Portfolio</ ax/li> 

<lixa href="#">Portf6Uo</' ax/li> 

</ul> 

<p class-'navbar-text pull-right">Slte criado pelo <a href="http://waujor.cow">Haujor«/ax/p> 
/divx!-- /.ravbar-collapse --> 

</nav> 

[.../c4/barra-navegacao-com-complementos.html] 

Observe na figura 4.8 os complementos para barras de navegagao, confer me as 
marcagoes mosrradas no itens [4.73], [4.7.4], [4.7.5] e [4.7.6]. 


Barra com caixa de busca 



Site Home PotttaFio Materias coniato 

| Busca 

OK 


Barra com botao 

Site Home Portfolio Matefias Cantata Login 


Barra com link dropdown 

Site Home Portfolio Artrgos - contact) 


Barra com texto 

Site Home Portfolio Materias Contato STie eriado pekj Maujor 


Figura 4.8 - Barra de navegagao com complementos. 


4.8 Caminho de navegagao 

Para criar urn caminho de navegagao, tambem conhecido pela sua designagao 
em ingles breadcrumb (literalmente: migalhas de pao), usamos como container 
urn elemento ol ao qual declaramos a classe breadcrunb. Os itens da lista marcam 


Conheca os livros do Maujor: http://livrosdomaujor.com.br 





132 Soostrap 3.3.5 

os links no caminho e na sequencia em que aparecetn na marca^ao. Use a classe 
active para desracar o texto do link para a pagina atual. 

Amarca^ao HTMLtipica para criar um caminho de navega^ao e conforme mos- 
trada no codigo a seguir. 

• HTML 

<ol class="breadcruFib ir > 

clixa href="#">Servi?os</ax/li> 
clixa href="#">active ’>Aplicag:des web</U> 

</ol> 

[.../c4/bread crumb-paginacao-label-badge.html] 


4.9 Pagina^ao 

Para criar um widget de pagina^ao usamos como container geral o elemento 
nav. Dentro desre elemento usamos um elemento ul ao qual declaramos a classe 
pagination. Esse elemento e o container para uma lista contendo os niimeros das 
paginas a navegar e os icones para os links ‘Anterior” e “Proxima”. 


4.9.1 Widget de paginal basica 

A marca^ao HTML tipica para criar um widget de paginagao basica e conforme 
mostrada no codigo a seguir. 

• HTML 

<nav> 

<ul class="pagination’'> 

<lixa href=’ 1 #" aria-label="Anterior"xspan aria-hidden="true">&laqjo;</sp3nx/ax/li> 
<lixa href="#">l</ax/li> 

<lixa href="#">2</ax/U> 

<li>a href="#">3</ax/li> 

<lixa href="#">4</ax/li> 

<lixa href="#">5</ax/U> 

<lixa href="#" ariaTabel="Pr6xaquo;</spanx/ax/li> 

</ul> 

</nav> 

[.../c4/bread crumb -paginacao-label-badge.html] 
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Por padrao o widget de paginagao e posicionado a esquerda. Declarar no container 
nav as classes text-center ou pull-right faz com que o widget seja posicionado no 
centra ou a direita respectivamente. 


4.9.2 Dimensionamento do widget paginagao 

O widget de paginagao tern dimensoes padrao. Declarar no container ul as classes 
pagination-lg ou pagination-sn permite que se obtenha mais duas dimensoes para 
o widget. 

A marcagao HTML tipica para criar os tres tamanhos de widget de paginagao e 
conforme mostrada no codigo a seguir. 

• HTML 

<nav> 

<ul class="pagination pagination-lg"> <!-- tananho naior --> 

<lixa href=''tt" aria-label="Anterior"xspan aria-hidelen= , 'true">&laquo;</ , spanx/ax/li> 


ou 


<nav> 

<ul class="pagination’'> <!-- tananho padrao --> 

<Uxa href- 1 #" aria-label="Anterior"xspan aria-hidden='’true">&laqjo;</spanx/ax/li> 


ou 


<nav> 

<ul class="pagination pagination-sn"> <!-- tananho nenor 

<lixa href=''#” aria-label= "Anterior"xspan aria-hidden= "true">&laquo;</spanx/ 

ax/U> 


4.9.3 Estado dos links 

Os links que remetem as paginas sao estilizados, por padrao, na cor branca no 
estado cm repouso e na cor cinza clara no estado nouseover. O Bootstrap preve 
as classes active e disabled a serem declaradas no elemento li, container do link, 
e que se destinam respectivamente a indicar visualmente a pagina cor rente e a 
desabilitar um link. 
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Arnarca^ao HTMLtipica para aplica^ao dessas classes e conforme mostrada a seguir. 


• HTML 

<nav> 

<ul class="pagination"> 

<li class="disabled"><a href="#" aria-label= "Anterior "xspan aria -hidden="true ”> 
&ttl71; spanx/ax/li> 

<lixa href="#">l</ax/li> 

<lixa href="#">2</ax/li> 

<li class= ,, active">a href="#">3</ax/li> 

<lixa href="#">4</ax/li> 
clixa href="#">5</ax/li> 

<lixa href="#" a r ta Tabe ru e ">&#18 7;</spanx/ ax/ li> 

</ul> 

</nav> 

[.../c4/breadcrumb-pagi nacao-label-badge.html] 

Notar o uso opcional das entidades HTML &#171; para o link Anterior e fi#187; 
para o link Proximo em lugar de &laquo; e firaquo; respectivamente. 


4.9.4 Pager 

Os links que remetem as paginas anterior c proxima sao chamados de pager. O 
Bootstrap preve a classe pager a ser deelarada no elemcnto ul, container dos dois 
links. Os links sao estilizados como botoes com bordas arredondadas e por pa- 
drao sao posicionados no centra da pagina. O container geral do pager deve ser 
um elemento nav. 

E possivel posicionar um link a esquerda e outro a direita do container com uso 
das classes previous e next respectivamente no elemento U container do link. Para 
desabilitar um link use a classe disabled no elemento U. 

A marca^ao HTML tipica para criar o widget pager e conforme mostrada no 
codigo a seguir 
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<nav> 

<ul class="pager"> 

<lixlixa href= "B ">Pr6xina</ax/li> 
</ul> 

</'nav> 

[.../c4/breadcrumb-pagirva cao-label-badge.html] 


4.10 Rotulos e marcadores 

Para criar rotulos estilizados com scis cores diferentes o Bootstrap prove a decla- 
ra^ao da classe de estilizagao geral label e das classes para colorir label-default, 
label-primary, label-success, label-info, label-warning e label-danger a serem declaradas 
em um elemento span contendo o rotulo. 

Para criar marcadores o Bootstrap preve a deciara^ao da classe de estiliza^ao badge 
a ser declarada em um elemento span contendo o marcador. Por padrao o rotulo e 
inserido em um pequeno retangulo cinza com bordas arredondadas e na cor branca. 

A marca^ao HTML tipica para criar rotulos e marcadores e confer me mostrada 
no codigo a seguir: 

• HTML 

<nav> <1-- Rotulos --> 

<ul class="pager"> 

<lixa href="#">Anterior</ax/li> 

<lixa href="#">Proxina</ax/li> 

</ul> 

</nav> 

<hl>Artigoshl> 

<h6>Menssagens <span class= "badge ">358</spanx/h6> 

[..A4/bread crurnb-paginacao4abel-badge.html] 

Observe na figura 4.9 os widgets, conforme as mar canoes mostradas no itens [4.8], 
[4.9], [4.10] e [4.11]. 
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Breadcrumb 


Pagina^ao basics 


servos Apnca^Oes 


t 2 3 4 

5 * 

Dimertsao pagination-Ig 

Dimensao padrao 


Dimenslo pagination-im 

* 1 2 3 4 5 » 

a 1 2 3 4 

5 * 

4 1 2 3 * s . 

Classes disabled € active 

Pager padrao 

Pnaxima 

Pager nos lados do container 

* 1 2 | | 4 3 . 

Aittanar 

Anterior Praxima 




Rotulos 


Ktarcadores 


|iWl iblS!?! TTt lU'iit'.l liMi'I'fl 


Artigos © 







Figurn 4,9 - Widgets. 


4.11 Jumbotron 

A palavra Jumbo Tron foi inventada pela Sony para designar uma inven^ao que 
conhecemos como “Tclao” presentes em locais dc grandes evcntos como campos 
de futebol c estadios para shows. 

No Bootstrap o widget jumbotron e uma especie de “telao” estilizado por padrao 
com bordas e fundo cinzas destinado a destacar conteiidos. 

E posslvel obter-se dois tipos de jumbotron conforme mostrados a seguir. 

4.11.1 Jumbotron basico 

Jumbotron basico e aquele cuja largura e igual a largura do seu container na 
pagina, ou seja, nao se estende necessariamente por toda a largura da tela. Para 
criar urn jumbotron usa-se um elemento container com a classe junbotron. 

Amarca^ao HTML tipica para criar o widget jumbotron basico e conforme mos- 
trada no codigo a seguir: 
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<div class="juFsbotron"> 

<hl>Junbotron basico</hl> 

<p>Loren ipsun.. .</ btn-lg' [ href="(T role= "button">Saiba nals</ax/p> 

</'div> 

[.../c4/jum botron.html) 


4.11.2 Jumbotron estendido 

Jumbotron estendido e aquele cuja largura e igual a largura da tela. Para obter 
este tipo de jumbotron cle deve ser marcado fora do div.container que content toda 
a marca^ao do Boostrap, ou seja, devera ser elemento filho de body. Alem disso, 
devera ser criado urn div.container elemento-filho de div. junbotron. 

A marca^ao HTML tipica para criar o widget jumbotron estendido e conforme 
mostrada no codigo a seguir: 

• HTML 


<div class="junbotron l, > 

<div cl.ass="container''> 

<hl>Junbotron estendido</hl> 

<p>Loren ipsun...</p> 

<pg” href="tt" role="button">Saiba nais</ax/p> 

</div> 

</div> 

[.../c4/jum botron.html] 

Observe na figura 4.10 os widgets, conforme as marcagoes mostradas no itens 
[4.11.1 e [4.11.2]. 


Conheca os livros do Maujor: http://livrosdomaujor.com.br 


138 


Boostrap 3.3.5 


Jumbotron estendido 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreetfaudbus, 
ante augue male su ad a mi, id rhoncus a ague lorenn eget el it. 


Salba mai 


Jumbotron basico 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit Morbi eEeifend, purus quis 
laoreet faueibus. ante augue malesuada mi, id rhoncus augue lorem eget elit. 


p 

iba mals... 

■i 



Figura 4.10 - jumbotron. 


4.12 Page-header 

O Bootstrap prove a classe page-header para ser definida em urn elemento contai¬ 
ner para um titulo. O efeito desta classc eode estilizar o titulo com uma borda 
inferior e margens. 

A marcagao HTML tipica para criar estilizar titulos com uso de page-header e 
conforme mostrada no codigo a seguir: 

• HTML 

<div class="p3ge-header"> 

ge-header</code> <small> con textc nenor</snallx/hl> 

</div> 

[.../c4/jum botron.html] 

O exemplo desta funcionalidade cncontra-se na mcsma pagina que demonstra 
o jumbotron. 
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Thumbnail e uma palavra inglesa que cm tradugao livre significa unha do po- 
legar, mas e usada tambem para designar uma coisa curta ou pequena. E e com 
estc sentido que cla se aplica ao jargao emprcgado em dcscnvolvimento web. Em 
resumo no nosso contexto seu significado e: miniatura. 

Normalmente urn thumbnail e uma miniatura de uma imagem, video, texto ou um 
conteudo qualquer que quando clicada leva o usuario a sua forma em tamanho 
real. O exemplo padrao e mais comum do uso de thumbnails na web e aquele no 
qua I e apresentado ao usuario um grid de imagens em miniaturas que quando 
clicadas acessam a imagem em seu tamanho real. 


4.13.1 Thumbnail padrao 

O Bootstrap preve a classe thunbnaU para ser definida em um elemento ancora a 
que servira de container para o elemento ing que contem o thumbnail. Para dispor 
os thumbnails lada a lado use o grid. 

Amarcagao HTMLtipica para criar um grid de thumbnails e conforme mostrada 
no codigo a seguir: 

• HTML 

<div class="coTnd-3 col-sn-6"> 

<a href ="tl.jpg" class="thupibnail"><ing src= ir tl.jpg" alt="carrol"x/a> 

</div> 

<div class="col-nd-3 col-sn-6"> 

<a href = "t2.jpg " class= l, thjnbr!ail"><\ng src= "t2.jpg" alt=" carro2''x/a> 

</div> 

<div class="col-nd-3 col-sn-6"> 

<a href = "t3.jpg " class= "thunbnaU"xing src= "t3.jpg" alt=" carro3"x/a> 

</div> 

<div class="coTnd class="thunbnail"xinig src= "t4.jpg" alt=” carro4"x/a> 

</div> 

[.../c4/thumbnail.html] 
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4.13.2 Thumbnail com conteudos 

O Bootstrap oferece funcionalidades para criagao de thumbnails com conteudos 
que resultam em widgets com finalidades diferentes daquela de simplesmente 
linear para uma imagem em tamanho real. 

O exemplo mais comum de um desses widgets e aquele usado em uma pagina 
de um site de vendas online contendo thumbnails mostrado a imagem de um 
produto e a seguir textos designando e descrevendo o produto, com link para 
informagoes adicionais. 

Existe a opgao de inserir conteudo no thumbnail. Neste caso retira-se o link da 
imagem do thumbnail e cria-se um container para os conteudos a inserir. Esse 
container devera receber a classe caption. 

A marcagao HTML tipica para criar um thumbnail com conteudos e identica 
a marcagao mostrada anteriormente com as alteragoes conforme mostrada no 
codigo a seguir: 

• HTML 

<div class="col-nd-3 col-sn-6"> 

<div class="thunbnall' r > 

< a hr e f = "tl.jpg" c1ass = "thunbnaiVx tng src="tl.jpg" alt= 'carrol"xA> 

<div class="caption"> 

<h3>Descrigao da inagen</h3> 

<p>Loren ipsur dolor.,.</p> 
href="#" role="button">Saiba nais.. .</ax/p> 

</div> 

</div> 


[.../c4/thumbnail.html] 

Observe na figura 4.11 os thumbnails conforme as marcagoes mostradas. 
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Thumbnail com conteudo 



Descripio da imagem 

Lorem ipsum Ootor sit amet. 
consEctEiuer-adipisung eK. Moral 
•eleitend, purus quis laoreet TauciDus,, 

ante auguE rnalesuada 



Descripio da imagem 

Lorem ipsumOotorsc amet 
consEdetuEr a dipping ein M-orbi 
defend, purus quiis laoreet tauciPus. 
anta aiuguE matesuada 


Saiba maia 


DescripSo da imagem 

Lonem Ipsum dolor sit amet, 

cansEctEiuEr adipiscing EtH Morbi 

eleitend, pums quis raorees taucitnis. 

ante auguE malEsuada 


Salt s mats 


Descripio da imagem 

Lorem ipsum csotorsit amet 

consEctatuEr adipisong EH*. Mdtdi 

eleitend pums quis laoreet tauciPus, 

anCE auguE mafesuada 



Figura 4.11 - Thumbnail. 


4.14 Calxas de alerta 

O Boos trap preve a cria^ao de caixas contendo mensagem ao usuario. Essas caixas 
podem ser estilizadas de quatro formas conforme a natureza da mensagem (mensa¬ 
gem de erro, mensagem de succsso, mensagem de alerta e mensagem informativa). 

As caixas de mensagem tem bordas arredondadas, fundo e texto estilizados em 
tons de cor conforme a natureza da mensagem, 

A marcaqao tipica para criar uraa caixa de alerta consta de um div container ao 
qual se atribui a classe alert e o par atributo/valor role="alert". 

As classes alert-success, alert-info, alert-warning e alert-danger a serem marcadas no 
container estilizam a caixa do alerta com a cor apropriada de sucesso (verde), 
informagao (azul), alerta (amarela) e erro (salmao). 

Para criar um botao para fechar a caixa de alerta usa-se a classe alert-disnissible 
no cantainer e dentro dele marca-se urn elemento button do com a classe close, o 
par atributo/valor data-di.sniss="alert". 
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Para criar um link dentro da caixa de alerta use a classe alert-link no elemento 
a que marca o link. 

A marca 9 ao HTML tipica para criar uma caixa de alerra com todas as funciona- 
lidades descritas e conforme mostrada no codigo a seguir: 

• HTML 

<div class="alert alert-success alert-disnissible" role="alert"> 

<button type= "button" class="close" data-dispiLss= "alert" arla-label="Fechar"> 

<span aria- hidden= "true''>&tine s; </ span> 

</button> 

<pxstrong>Atenuna 

<a href="#" class="alert-link">nensagen de alerta.</a> 

</p> 

</div> 

[,../c4/caixa-de-a!erta.html] 


4.15 Barra de progresso 

Barra dc progresso e um widget dcstinado a oferecer uma indica^ao visual ao 
usuario do andamento de uma tarefa tal como o download de um arquivo. 

Este widget usa as funcionalidades dc transi^ao e anima^ao das CSS3 que nao 
sao suportadas pelos IE9 e anteriores bem como por versoes antigas do demais 
navegadores navegadores. 

A marca^ao tipica para criar uma barra de progresso basica consta de um div 
container ao qua! se define a classe progress e um div elemento-filho ao qual se 
define os seguintes atributos com seus respectivos valores: 


Atributo 

class 

role 

aria-valuenow 

aria-valuemin 

aria-valuemax 

style 


Valor- Finaiidade 

progress-bar - Servir de ancora para estilizagao. 

progressbar-Atributo destinado a definir o valor semantico do elemento 
div. 

numero - Indica o valor atual do progresso da tarefa. 
numero - Indica o valor minimo medido pela barra, 
numero - Indica o valor maximo medido pela barra. 

width em porcentagem — Indica visualmente o valor do progresso da 
tarefa. 
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Os atributos role e aria - * visam a incrementar a acessibilidade da barra de progresso. 

Aporcentagem de progresso na barra e obtida com declaragao inline para a pro- 
priedade width, expressa em porcentagem. 

Declara-se o progresso da rarefa dentro de um elemento span ao qual se atribui a 
classe sr-only com a finalidade de faze-lo acessivel somente a tecnologias assistivas. 

Amarca^ao para criar uma barra de progresso basica e conforme mostrado a seguir. 

• HTML 

cdiv class="progress'^ 

<div class= "progress-bar" role="progressbar" aria-valuenow="60" aria-valjenin="0' r 
aria-valuenax="10C" style="width: 60M;"> 

<span class="sr-only">60:'i Conplete</span> 

</div> 

</div> 

Essa marca^ao renderiza uma barra de progresso padrao cuja faixa indicativa do 
progresso da tarefa e estilizada em gradiente na cor azul escura. 

Para obter barras de progresso estilizadas nas cores azul claro, verde, laranja e 
vermelho basta declarar no div.progress-bar as classes progress-bar-info, progress-bar- 
success, progress-bar-warning e progress-bar-danger, respecrivamente. 

Para obter barras de progresso estilizadas segundo o efeito zebra, basta declarar 
no div.progress-bar a classe progress-bar-striped. 

Para obter barras de progresso estilizadas segundo o efeito zebra e animadas, 
basta declarar no div.progress-bar as classes progress-bar-striped e active. 

Para obter barras de progresso multiplas, basta acrescentar elementos-filho no 
container da barra. 

Amarcagao HTML mostrada a seguir esclarece a obten^ao desses diferentes tipos 
de barra de progresso: 

• HTML 

<div class= ,, row"> 

<div class="col-nd-6"> 

<h4>Barras de progresso con cor en gradiente</h4> 

<div class="progress’^ 

<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuenin=' r O” 
aria-valuenax="lGO" styLe="width: 6CK;"> 
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<span class="sr-only ">6054 Coreplete</span> 

</div> 

</div> 

<div class="progress'^ 

<div class="progress-bar progress-bar-info" role="progressbar" aria-vaUienow="40" 
aria-valuenin^'G" aria-valuereax="lGO" style="width: 40K;"> 

<span class="sr-only ">40*4 Corepletec/span> 

</div> 

</div> 

<div class="progress'^ 

<div class="progress-bar progress-bar-success" role="progressbar" 

aria-valuenow="80" aria-valuenin= l, 0" aria-valuenax="lGO" styles "width: 

<span class="sr-only ">8054 Coreplete</span> 

</div> 

</div> 

<div class="progress'^ 

<div class="progress-bar progress-bar-warning" role=”progressbar" 

ar\a-valuenow="30" aria-valuenin=' r O" aria-vaiuertax= "IGO" style= "width; 3fl!4;"> 
<span class="sr-only ">3054 Coreplete</span> 

</div> 

</div> 

<div class="progress'^ 

<div class="progress-bar progress-bar-danger" role="progressbar' r aria-valuenow="50" 
aria-valuerein="0" aria-ualuereax=''10G" style="width: 5054; "> 

<span class="sr-only ">5054 Coreplete</'span> 

</div> 

</div> 

<div class="col-nd-6"> 

<h4>Barra de progresso core efeito zebra</h4> 

<div class="progress'^ 

<div class="progress-bar" role="progressbar progress-bar-striped" 

aria-vaUienow="60" aria-valuem.n="Q" aria-valueriax="lGO" style= "width: 6054; "> 
<span class= ,f sr-only">60?4 Coreplete</span> 

</'div> 

</div> 

<div class="progress'^ 

<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" 
aria-valuenow="40" aria-valuem.n=' r 0" aria-valuenax="ICO" style= "width: 4Q5i; "> 
<span class="sr-only">405i Coreplete</span> 

</div> 
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</div> 

<div class="progress'^ 

<div class="progress-bar progress-bar-success progress-bar-striped” 

role=”progressbar" arla-ualuenow="80" aria-valuenin="0" aria-valuenax="100" 
style="width: 80%; "> 

<span class=”sr-only ">8054 Conplete</span> 

</div> 

</div> 

<div class="progress’^ 

<div class="progress-bar progress-bar-warning progress-bar-striped” 

role=”progressbar" aria-valuenow=”30" aria-valuemn="G" aria-valuenax="100" 
style="width: 30%;"> 

<span class=”sr-only">305i Conplete</span> 

</div> 

</div> 

<div class="progress'^ 

<div class="progress-bar progress-bar-danger progress-bar-striped" 

role="progressbar” aria-valuenow=' r 50" aria-valuenin="G" aria-valuenax= "100" 
style="width: 50%;"> 

<span class=”sr-only">50% Conplete</'span> 

</div> 

</div> 

</'div> 

</div> <1— /.row --> 

<div class="row"> 

<div class="col-nd-6"> 

<h4>Barra de progresso anipiada</h4> 

<div class="progress’^ 

<div class="progress-bar progress-bar-danger progress-bar-striped active" 
role="progressbar" aria-valuenow="5G" aria-valuemn="G" aria-valuenax="100" 
style="width: 5G%;"> 

<span class=”sr-only">50 £ s Coraplete</span> 

</div> 

</div> 

<div class="col-nd-6"> 

<h4>Barra de progress© nultipla</h4> 

<div class="progress’^ 

<div class="progress-bar progress-bar-danger progress-bar-striped ” 

role="progressbar" aria-valuenow="40" aria-valuenin="G" aria-valuenax=”100" 
style="width: 40%;"> 
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<span class="sr-only">40$i Coreplete</span> 

</div> 

<div class="progress-b3r progress-bar-info" role="progressbar" aria-vaUienow^'35” 
aria-valuerein="0" aria-valuenax=TO0" style="width: 35%;"> 

<span clas s="sr-only ">35?« Coreplete</span> 

</div> 

<div class="progress-bar progress-bar-warning" role="progressbar" 

ana-ualuenow="10" aria-valuerein= ,, 0" aria-valuenax=TOO’ 1 style= "width: 10%; "> 
<span class="sr-only">lQK Coreplete</span> 

</div> 

</'div> 

</div> 

</'div> <1-- /.™ --> 

<div class="row r, > 

<div class="col-red-6"> 

<h4>Barras de progresso core rotulo</h4> 

<div class="progress'^ 

<div class= "progress-bar" role="progressbar" aria-valuenow="6ax= TOO" 
style="width: 60%;"> 

60% 

</div> 

</div> 

</'div> 

</div> <1— /.row --> 

[.../c4/barra-de-progresso.html] 

Na figura 4.12, mosrramos a renderiza^ao das barras de progresso, conforme 
marca^ao HTML anterior. 


Barras da progresso com cor am gradients 


Barra de progresso com efeiio zebra 


3arrg de progresso arfimada 


Barra de progresso mufttpla 


Barras de progresso com rotuio 


Figura 4.12 - Barras de progresso. 
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4.16 0bjeto5 de midia 

As funcionalidades do Bootstrap para marca^ao dc objetos dc midia destinam- 
-se a criar componentes do ripo cometarios cm blogs, tweets etc. cujo padrao de 
apresenta^ao baseia-se na inser^ao de uma imagem a esquerda ou a direita de 
urn conteudo textual descritivo da midia. 

A marca$ao padrao para esse componente usa tres elementos div conforme des- 
critos a seguir. 

• Eleinento div container geral ao qual atribui-se a classe nedia. 

• Eleinento-filho div ao qual atribui-se a classe media-body destinado a marcar 
conteudos textuais que se destinam a descrever a midia. O elemento hi-hs 
que marca o titulo do texto descritivo devera receber a classe nedia-heading. 

• Elemento-filho div destinado a servir de container para a midia e ao qual 
atribui-se a classe media-left ou media-right conforme se queira posicionar a 
midia a esquerda ou a direita do conteudo descritivo da midia. Este elemento 
devera ser posicionado na marca^ao antes do div.media-body se o alinhamento 
for a esquerda ou depois do div.nedia-body se o alinhamento for a direita. Ao 
elemento que marca a midia {ing, video, canvas etc.) define-se a classe nedia-object. 

For padrao o topo da midia e alinhado com o topo do texto descritivo. Pode- 
mos alterar este alinhamento dcfinindo as classes nedia-diddle ou nedia-botton no 
div. nedia-body. Estas classes se destinam a alinhar verticalmente a midia no centra 
ou na parte inferior, respectivamente, do texto descritivo. 

O exemplo mostrado a seguir esclarece a marcagao HTMLe o uso destas classes. 

* HTML 

<div class="nedia"> <!-- nidia a esquerda --> 

<div class="nedia-left" href="#”> 

<ing class="nedia-object" src="64x64.gif" alt=""> 

</div> 

<div class="nedia-body"> 

<h4 class="nedia-heading">Titulo</h4> 

<p>.. .</p> 

</div> 

</div> 

<div class="nedia"> <!-- nidia a direita --> 

<div class="nedia-body"> 

<h4 class="nedia-heading">Titulo</h4> 
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<p>. ..</p> 

</div> 

<div class="nedia-right" href="#"> 

<ing class="piedia-object" src="64x64.gif" alt=""> 

</div> 

</div> 

<div class="nedia"> <!-- alinhanento vertical no neio --> 

<div class="nedia-left nedia-niddle" href="#”> 

<ing class= "media-object" src="64x64.gif" alt= l,r ’> 

</div> 

<div class="Red\a-body"> 

<h4 class="nedia- heading ir >Titulo</h4> 

<p>. ..</p> 

</div> 

</div> 

<div class="nedia"> <!-- alinhanento vertical inferior 
<div class="nedia-left nedia-botton" href="#”> 

<ing class="media-object" srdiv class="media-body"> 

<h4 class="nedia-heading">Titulo</h4> 

<p>. ..</p> 

</div> 

</div> 

[.../c4/objetos-de-midia-1.html] 

Na figura 4.13, niostramos a renderizagao dos objetos de midia, conforme a mar- 
cagao HTML mostrada anteriormente. 


Exemplo de mfdia aJtnhada a esquerda 

Cras siamet iiFbfi llbem, fri gravida nula. Nulla veE metus 
scetensque ante sollicitudin commotio. Cras purus odio. 
vestfbulLim in yulputate at, tempus viverra turpis 

Exemplo de mfdia allnhada a direita 

Cras srt amet niDh libera, in gravida nulla. Nulla vel metus 
seelerisque ante sodcitudin commodo Cras puma odio. 
uestlDulum m vulputate at, tempus viverra turpts. 


64x64 


64*64 


Exemplo de midia alinhada verticalmente no 
meio 

eras sit amet nron ifbero. m gravida nulla. Nulla vel menus 
scel-s risque ante sclticitudin commodo. Cras purus odd. 
vestitMiium in vulputaLe at. lempus viverra Eurpis. 


Exemplo de midia allnhada verticalmente 
embaiKo 


64*64 


Cras sit amet nibfi libero in gravida nulla Nulla vel mefus 
seeiensque ante soUlcitudin commodo. eras purus odio, 
vesfibuium in vulputate at tern pus viverra turps. 


Figura 4.13 -Almhamento de objetos de midia. 

Opcionalmente podemos inserir objetos de midia com uso de elementos para 
marcagao de listas que podem ser aninhados, conforme a estrutura HTMLgeral 
mosrrada a seguir. 
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<ul class="nedi3-Ust''> 

<li class="nedia"> 

<div class="Redia-left r ' href="# M > 

dug class="nedia-object" src="64x64.gif" alt=""> 

</div> 

<div class='’nedia-body [ '> 

<h4 class="fiedia-headiug '>Titulo</h4> 

<p>...</p> 

<div class=”nedia"> <!-- nidia aninhada 
<div class= l, nedia-left" href="#"> 

dug class="nedia-object" src="64x64.gif" alt="a-body"> 
<h4 class="nedia-heading ">Titulo aninhado</h4> 

<p>...</p> 


</li> 

</ul> 

[.../c4/objetos-de-midia-2.html] 

Na figura 4.14, mostramos a renderiza^ao dos objetos dc midia aninhados, con- 
forme a marca^ao HTML mostrada anteriormente. 


Titulo 

Cra& sit a met nibh libera, in gravida nulla. Nulla ve I me tus see le risque ante soilicitudin commode. Cras 
purus adio, vestibulum in vulputate at. tempos viverra turpis. 

Titulo para midia aninhada - mvel 1 

eras sit amet nibh libera, la gravida nulla. Nulla vel metis scelerisque ante sollicitudin 
com mode. Craspurusodio, vestiPulum in vulputate at. tempus viverra turpis. 

Tftulo para midia aninhada - nivei 2 

Gras sit amet nibh libera, in gravida nulla. Nulla vel metus scelerisque ante 
sollicitudin commotio. Cras purus odio, vestibulum in vulputate at, tempus viverra 
turpis. 


Titulo para midia aninhada - nivei 1 

Cras sit amet nibh libera. rn gravida nulla. Nulla vel metus scelerisque ante sollicitudin 
commodo. Cras purus odio. vestibulum in vulputate at, tempus viverra turpis. 


64x64 


64x64 


64x64 


Figura 4.14 - Objetos de midia aninhados. 
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4.17 Agrupamento de itens de listas 

Dcnomina-se agrupamento de itens de listas urn componente do Bootstrap cuja 
finalidade e criar estiliza^ao diferenciada para as listas da HTML. 

Amarca^ao HTML para criar uma apresenta^ao basica deste componente e con- 
forme mostrada a seguir. 

• HTML 

<ul class="list-group "> 

<U class="list-group-iten">Abacate</U> 

<li cl3ss="Ust-group-iten' >Car3nbola</U> 

<li class= "list-group-iten">Figo</U> 

<li class="list-group-iten">Uva</U> 

</ul> 

E possivel inserir um “badge” (termo ingles que neste contexto significa marcador 
e se destina a fornecer informagao adicional) em cada item da lista. For padrao o 
identificador e posicionado a direita do texto do item da lista. 

A marca^ao HTML para criar um marcador em itens da lista e confer me mos¬ 
trada a seguir. 

• HTML 

<ul cl.3ss="list-group "> 

<li cl3ss="list-group-iten"> espan class= M badgeM4</span> flbacate</li> 

<li class="list-group-iteti"> «span class="badge n >fora de epoca</spans CaraFibola</U> 
<li class="list-group-iten"> <span class="badge">345</span> Figo</li> 

<li cl3ss="list-group-itepi"> espan class= H badge ,l >en faltae/span> Uva</li> 

</ul> 

Para criar uma lista de links use um container div cm lugar do elemento ul e ele- 
mentos a em lugar de li conforme marca^ao HTML mostrada a seguir. 

• HTML 

<div class="list-group"> 

<a class="list-group-item active" href="#">Site do flaujor</a> 

<a class="list-group-item" href="#">Wikipedia portugues</a> 

<a class="list-group-iter disabled" href="#">Site do H3C</a> 

<a class="Ust-group-iten" href="#">Coogle</a> 

</div> 
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Para criar uraa lista de boroes com efeito rollover use uin container thv em lugar 
do elemento ul e elementos button em lugar de H conforme marca^ao HTML 
mosrrada a seguir. 

• HTML 

<div class="list-group"> 

<button type="button" class="list-group-iten">Arquivo</button> 
cbutton type= "button" class="Ust-group-iten">Iriseri.r</button> 

<button type= "button" class=' [ Ust-group-iten">Copiar</button> 
cbutton type="button" class="list-group-iten">Enviar</button> 

</div> 

As classes contextual se destinarn a estilizar um item da lista nas cores verde, azul 
claro, amarela e vermeiha, cor esta que transmite a ideia do contexto do item. As 
classes para definir as cores citadas sao list-itei-i-success, list-iten-info, Ust-iten-uarning 
e Ust-iten-danger, respectivamente, conforme a marca^ao HTML mostrada a seguir. 

• HTML 

<ul class="list-group"> 

<li class="list-group-iten list-group-iten-success'>Arquivo enviado!</li> 
cli class="list-group-item list-group-iten-info">Use o fornato JPG</li> 

<li class="Ust-group-iten list-group-iten-warning’>Esta faltando urt arquivo</li> 

<U class=" list-group-iten list-group-iten-danger ">Podera conter virus</li> 

</ul> 

Para desabilitar um item da lista use a classe disabled no elemento que marca o 
item. Itens desabilitados sao renderizados com fundo na cor cinza. No exemplo 
que mostra a lista de links o item “Site do W3C” foi desabilitado. 


Dica: As classes contextual e as classes active e disabled podem ser usadas 
em qualquer um dos agrupamentos de itens mostrados anterioos diferentes 
agrupamentos de itens de lista conforme as marca^oes HTML anteriores encontra- 
se em [..Jc4/agrupamento-de-itens-de~lista.html]. 


Na figura 4.15, mostramos a re rider iza^ao destes agrupamentos de itens de lista. 
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Agrupamento basico 

Itens com "badge" (marcadores) Agrupamento de links 

Abacate 

Abo cafe 

O 

Site do Maujor 

carambota 

Carambola 


Wikipedia portuguAs 


Figo 

Figo 


Site t5o me 


Uva 


Googfe 

Agrupamento de botoes 

Classes centsxtuais 


Lista com conteudo personalizado 

Arquivo 

Arquho enviado! 


A fun^So calcO das CSS i 

InserPr 

Use o lor male JPG 


A flinpso cair(} das CSS pt! (nils i]i re se 
definam ua lores CSS com usode 

Co par 

Esta faEtando um arquivo 


vafcr adetado para a proprsedade e o 
resuliadc de u nna esepnessao 

Enviar 

Podera canter virus 


malernSlica. 








Espetificagoes do W3C para 
construed de layouts 

Nessa materia vote ira contiecero 
_-an/hniYoinli"! Jl-a-e new-lftj-- as-A a c Hr, r- _ 


Figura 4.15 - Agrupamento de item de lista. 


4.18 Paineis 

Painel e o cornponente do Bootstrap destinado a criar um box para conteudos. 
O box e estilizado com bordas cm cantos arredondados c seu fundo e conteudos 
recebcm estilizaqao definida por classes espedficas. 

A marcagao HTML para criar um painel basico e conforme mostrada a seguir. 

• HTML 

<div class="panel panel-default"> 

<div class="panel-body"> 

<p>Ccnteudo textual do painel basico - Loren ...</p> 

</div> 

</'div> 

A marca^ao HTML para criar um painel com titulo e conforme mostrada a seguir. 

• HTML 

<div class="panel panel-default"> 

<div class="panel-heading"> 

<h3 class="panel-title">Titulo do texto do painel</h3> 

</div> 

<div class="panel-body"> 
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<p>Conteudo textual do painel basico - Loren ...</p> 

</div> 

</div> 

Amarca^ao HTML para criar um painel com rodape e conforme mostrada a seguir. 

• HTML 

<div class="panel panel-default"> 

<div class="panel-body"> 

<p>Conteudo textual do painel basico - Loren ...</p> 

</div> 

<div class="panel-footer">Rodape do painel</div> 

</'div> 

Para criar um painel com ritulo e bordas estilizadas nas cores contextuais, azul 
escuro, vcrde, azul claro, amarela e vermelha, cor esta que transmite a ideia do 
contexto usamos, no container geral do painel, as classes panel-prinary, panel-success, 
panel-info, panel-warning e panel-danger respectivainente conforme mostrado na marca- 
<;ao a seguir. 

• HTML 

<div class="panel panel-prinary"> 

<div class="panel-heading"> 

<h3 class="panel-title'’>Titulo do texto do painel</h3> 

</div> 

<div class="panel-body"> 

<p>Conteudo textual do painel basico</p> 

</div> 

</div> 

A marca^ao HTML para criar um painel com conteudo textual contendo uma 
tabela e conforme mostrada a seguir. 

• HTML 

<div class="panel panel-default"> 

<div class="panel-heading"> 

<h3 class="panel-title'’>Titulo do painel con tabela</h3> 

</div> 

<div class="panel-body"> 

<p>Conteudo textual do painel con una tabela - Loren..,</p> 
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</div> 

■stable class="table"> 

« 4 ■ 

</table> 

</div> 

A marca^ao HTML para criar um painel sem conteudo textual contendo uma 
tabela e confer me mostrada a seguir. 

• HTML 

<div class="panel panel-default"> 

<div class= "panel-heading"> 

<h3 class="panel-title">Titulo do painel con tabela</h3> 

</div> 

■stable class="table"> 

</table> 

</div> 

A marcagao HTML para criar um painel contendo um agrupamento de itens e 
confer me mostrada a seguir. 

• HTML 

<div class="panel panel-default"> 

<div class="panel-heading"> 

<h3 class="paneTtitle">Titulo do painel con agrupanento de itens</h3> 

</div> 

<div class="panel-body"> 

<p>Conteudo textual do painel con un agrupanento de itens</p> 

</div> 

<ul class="list-group"> 

<Vi class="list-group-iten">Abacate</li> 

<li class="list-group-iteFi">Caranbola</U> 

<li class-'list-group -itepi">Figo</li> 

<li class="list-group-iten">Uva</U> 

</ul> 

</div> 
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Dica: Tal como mostrado para painel com tabelas, o painel com agrupamento de 
itens podera conterrquivo que demonstra os diferentes tipos de painel con forme 
as marcaqoes HTML anteriores encontra-se em [.../c4/painel.html}. 


Na figura 4.16, mostramos a renderiza^ao destes tipos de painel 



Figura 4.16 - Paineis. 


4.19 Mfdias responsivas 

O Bootstrap preve classes para tornar responsiva a incorpora gao de conteudos 
de tcrceiros, ou proprios, com uso dos elementos de marca^ao ifrane, enbed, video 
e object. 

Amarca^ao HTML para tornar responsiva a incorpora^ao com ifrane e conforme 
mostrada a scguir. 
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• HTML 

<!-- ttidias cor razao de aspecto 16:9 --> 

<div class="embed-responsive embed-responsive-16by9"> 

cifrarae class="enbed- responsive-iteFi" src="... Ir x/iframe> 

</div> 

<!-- Midias cor razao de aspecto 4:3 --> 

<div class="embed-responsive embed-responsive-4by3"> 

<ifraRe class="enbed-responsive-item" src=".. .”></iframe> 

</'div> 

Para incorporar urn video proprio com uso do elemento video da HTML5 a mar- 
ca^ao HTML c conforme mostrada a segmr. 

• HTML 

<div class="embed-responsive embed-responsive-4by3”> 
cfigure class="enbed- responsive-iten"> 

<video poster="cover.jpg" controls> 

<source src="plypiouth,ogg" type="video/'ogg" /> 

<source src="plymouth,mp4" type="video/np4" /> 

<source src="plymouth.webn" type="video/webm" /> 

<p>Lanento! Seu navegador nao suporta o elenento vo video localmente <br /> 

<a href="plymouthi.mp4">fazendo o downloatk/a></p> 

</video> 

</figure> 

</div> 

[.../c4/video-htm[5-responsivo.htmi] 

Para incorporar um video do YouTube a marca^ao HTMLe conforme mostrada 
a seguir. 

• HTML 

<div class="ertbed-responsive embed-responsive -16by9 "> 
cfigure class= "embed-responsive-iten"> 

<iframe src="https://www.youtube.com/embed/9GR6NNXEIsE" allowfullscreen></iframe> 
</figure> 

</'div> 

[.../c4/video-youtube-responsivo.html] 
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Dica: O codigo de incorporagao (elemento ifrane) e fornecido pelo YouTube e o 
Bootstrap permite que se retire do codigo os atributos width, height e franeborder. 


Para incorporar um mapa do Google a marca^ao HTML e conforme mostrada 
a seguir. 

• HTML 

<div class="enbed-responsive enbed-responsive-4by3’'> 
cfigure class="enbed-responsive-iten"> 

<ifrane src=" https://wvm.google.cop 1 /n 3 ps/enbed?..." allowfullscreen></ifr3ne> 
</figure> 

</div> 

[.../c4/mapa-google-responsivo.html] 


Dica: O codigo de incorpora^ao (elemento ifrane) e fornecido pelo Google Maps 
e o Bootstrap permite que se retire do codigo os atributos width, height, style e 
franeborder. 


4.20 Wells 

Este e um componcnte do Bootstrap cuja finalidade e criar um box, com padding 
padrao, para um elemento da marca^ao estilizado com uraa borda de cantos 
arredondados, uma cor de fundo e um efeito de baixo-relevo. 

Basta que se defina a classe well no elemento, para que se de a estiliza^ao. As classes 
opcionais well-sn e well-lg permitam que se diminua ou aumente respectivamente o 
padding padrao obtendo boxes com altura menor c maior em rela^ao a altura padrao. 

A marcagao HTML para criar os tres tipos de box (rres alturas) e conforme mos¬ 
trada a seguir. 

• HTML 

<p class="well well-sn">Pellentesque sapien...</p> 

<p class="weVr>Pellentesque sapien.. .</p> 

<p class="well well-lg">Pellentesque sapien...</p> 

[„./c4/wells.html] 
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Na figura 4.17, mostramos a render izagao dos tres tip os de box. 

Well altura reduzlda 

Pellentesque sapien. Sed purus sapien. eleifend ac 7 volutpat ac, molestie eget r massa. Nam a nibh. Nulla facilisi. 

Well padrao 

Pellentesque sapien. Sed purus sapien. eleifend ac. volutpat ac molestie eget, massa. Nam a nibh. Nulla 
faciftsL 


Well altura aumentada 


Pellentesque sapien. Sed purus sapien. eleifend ac. volutpat ac, molestie eget. massa. Nam a nibh. Nulla 
facilisi. 


Figura 4.17 - Wells. 
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CAPITULO 5 

Plugins 


Vimos no capitulo anterior que alguns componentes do Bootstrap sao interativos. 
Consideremos a cria^ao de menu dropdown conformc estudado no item [4.2]. 
Naquele item mencionamos, sem mais considera^des, que a condi^ao para o 
funcionamento do menu (abertura e fechamento) era a inclusao, na pagina do 
menu, da biblioteca jQuery, do plugin dropdown e da defini^ao do par atributo/ 
valor data-*. Naquele capitulo mencionamos ainda a necessidade de inclusao de 
plugins para fazer funcionar a navega^ao em abas e as caixas de mensagens. Plu¬ 
gins estao incluidos no pacote de download do Bootstrap e eles nao sao apenas 
aqueles citados no capitulo 4. Neste capitulo estudaremos os plugins do Bootstrap 
suas aplicanoes e uso. 


5.1 Introdugao 

Quando fazemos o download do Bootstrap (ver item [1.3]) obtemos uma pasta 
denominada js que contem dois arquivos: o arquivo com todos os plugins do 
Bootstrap em versao comentada e versao comprimida. 

Todos os componentes interativos do Boostrap dependem da inclusao da biblio¬ 
teca jQuery e do arquivo de plugins para funcionar. 

E quase certeza que urn projeto nao utilize todos os plugins do Bootstrap. Nesse 
caso seria injustificavel linear para o arquivo obtido no download do Bootstrap e 
seria mais sensato fazer o download personalizado, incluindo somente os plugins 
a usar no projeto. 

A marca^ao HTMLtipica para incluir os arquivos JavaScript que farao funcionar 
a i ntera^ao na pagina e conformc mostrado a seguir. 
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• HTML 

<!-- Scripts para fazer funcionar o nenu --> 

<script src= "j /ajax. googleapis .con/ajax/libs/jquery/1.11.2/jquery.nin. js"x/script> 
<script>window.jQuery 11 docunent.write('<script src="../bootstrap/js/jquery.nin.js"> 
<\/script>')</script> 

<script type="text/javascript" src="../bootstrap/j s/boot strap .r in. js"x/script> 

<body> 

<htnl> 

Nessa marca^ao optamos por incluir os arquivos imediatamente antes da tag 
de fechamento do elemento body e nao e do escopo deste livro discutir o local de 
inclusao de scripts na pagina. 

Convent esclarecer dois pontos iraportantes sobre o codigo mostrado: 

• Na data cm que escrevemos este capitulo a versao mais recente da biblioteca 
jQuery era a 1.11.2. No seu projeto altere para a versao atual. 

• Salve uma copia da biblioteca jQuery na pasta js (que voce obteve com o 
download) para criar o link que servira de fallback para o caso de falha no 
CDN Google. No nosso caso salvamos a biblioteca com o nome de arquivo 
jquery.mm.js. 

O Bootstrap nos oferece duas opijoes para aplicar o metodo principal de urn 
plugin em urn elemento da marca^ao. Uma op^ao e com a defini^ao, diretamente 
na marcaijao HTML, de um atributo data-* no elemento que recebe o metodo 
do plugin e a outra e com uso da sintaxe da biblioteca jQuery para aplica^ao de 
seus metodos. Vejamos cada uma dessas op^oes tomando como exemplo um link 
de um menu dropdown. 

Em [4.1] esrudamos a construgao de menus dropdown evimos queeles depend em 
do plugin dropdown. Para mostrar as duas optjoes de fazer funcionar o plugin, 
considere a marca^ao HTML retirada daquele item, para o link Frutas. 

• HTML - Plugin com uso do atributo data-* 


<div class="dropdown"> 

<button class=’'btr btn-prinary dropdown-toggle ,r type= "button" id="dropDownl" 

dat3-toggle="dropdown" aria-expanded="trje">Frutas <span c la s s=" c a ret" ></ spanx/button > 
<ul class="dropdown-nenu" role-’rcenu" ana-labeUedby="dropDwinl"> 

<li role="presentation''><a role= r ’neru-iten" href- 1 #" tabindex="-l">Abacaxi</ax/li> 
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<li role= "presentation";*.. ,</li> 

</ul> 

</div> <1-- /.dropdown --> 

<!-- conteudos da pagina --> 

<script src= 7/ajax. googleapis .con/ajax/libs/jquery/1,11.2/jquery.nin. js"x/script> 
<script>window.jQuery 11 docunent.write(’<script src=”../bootstrap/js/jquery.nin.js"x\/ 
scripts’)</scripts 

<script type= , ’text/javascript" src="../bootstrap/js/bootstrap.nin.js"x/script> 

<body> 

<htnl> 

Nessa op<jao definimos o atributo data -toggles 11 dropdown" no eiemento que aciona o 
submenu e o Bootstrap com seus mecanismos intcrnos aplica o metodo dropdownQ 
do plugin naquele eiemento. 

• HTML - Plugin com uso da sintaxejQuery 
<div class="dropdown"> 

<button class=’'btn btn-prinary dropdown-toggle" type= "button" id=”dropDownl" 

data - toggl es "dropdown" aria-expanded="true">Frutas <span class="caret"></spanx/buttons 
<ul class="dropdown-nenu" role="nenu" ana-labelledby="dropDownl"> 

<li role="presentation”xa role="nenu-iten" href="#” tabindex="-l">Abacaxi</ax/li> 
<li role="presentation">...</li> 

</ulx/div> <S-- /.dropdown --> 

<!-- conteudos da pagina --> 

<script src- "//ajax .googleapis. con/ajax/libs/ jquery/1.11.2/ jquery .nin. js"x/ scripts 
<scriptswindow.jQuery || docunent.write('<script src="../bootstrap/js/jquery.nin.js"> 
<\/script> 1 )</sc ript> 

<script type= "text/javascript" src="../bootstrap/js/bootstrap.nin.js"x/scripts 
<script type="text/javastript”> 

$(' .dropdown-toggle' ).dropdown(); 

</script> 

<body> 

chtnls 

Nessa op^ao nao ha defini^ao de atributo data-toggle="dropdown" no eiemento que 
aciona o menu. Usa-se a sintaxe jQuery padrao para chamar o metodo dropdownQ 
naquele eiemento. 
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O uso do atributo data-* deve ser considerado cm primeiro lugar, contudo a ou- 
tra opgao oferece ao desenvolvedor maior flexibilidade na aplica§ao do metodo, 
podendo tirar proveito, por exemplo, do encadeamento que a sintaxe jQuery 
possibilita como raostrado a seguir. 

$( 1 .dropdown-toggle').dropdown(),css('color', 'fffOO'); 

ou ainda, definir op^oes: 

$(' #janelaModal').nodal( { keyboard: false } ); // desabilita abertura por teclado 

E possivel desabilitar globalmcnte a op^ao data-* para fazer funcionar plugins 
confer me raostrado a seguir: 

$('body r ).off('data-api'); // desabilita para todos os plugins 

Podemos tambem desabilitar a op$ao data-* para um determinado plugin con- 
forme mostrado a seguir: 

$('body').off('dropdown.data-api'); // desabilita o plugin dropdown 

Construtores jQuery estao disponiveis com a sintaxe classica: 

$.fn.none-do-plugin.Constructor 


5.2 Plugins 

Nos itens a seguir estudaremos cada um dos plugins disponiveis no Bootstrap. 

O script dos plugins do Bootstrap encontram-se no arquivo existente na pasta js 
denominado bootstrap, min.js. 

No caso de download compilado esse arquivo contem todos os plugins do Boots¬ 
trap. Opcionalmente voce podera incluir somente os plugins que ira utilizara no 
seu projeto fazendo o download personalizado. 

No caso de download dc todo o Bootstrap (source) voce podera obrer os arquivos 
dos plugins individualmente no arquivo bootstrap.js que encontra-se na pasta js. 


5.2.1 Transires 

O plugin para transigoes destina-se a ser usado em conjunto com outros plugins 
cujas funcionalidades admitem uso de transi^ao tal como obtengao de efeitos slide 
e fade em janelas mo dais, abas, caixas de alerta e paineis. As transfeoes disponiveis 
nesse plugin sao slide e fade. 
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Janela modal e uma poderosa interface de dialogo com o usuario que se destina 
a variados usos e proporciona um visual agradavel ao visitante da pagina. 

O Bootstrap possibilita a cria^ao de janela modal com uso de marca^ao tipica e 
o mecanismo de abertura e fechamento da janela pode ser definido de duas for¬ 
mas: diretamente com uso do par atributo/valor data-toggle="nodal" ou codificando 
com uso de metodos JavaScript previstos no Bootstrap. E possivel ainda obter o 
efeiro de janela modal criando scripts personalizados com uso dos metodos e 
propriedades propnos da biblioteca jQuery 

5.2.2.1 Com uso de data-toggle 

Para acionar o mecanismo de abertura e fechamento da janela modal basta 
declarar o atributo data-toggle para o eiemento que marca o botao ou o link de 
abertura da janela. 

Os mecanismos internos do Bootstrap identificam aquele atributo na marca^ao 
e acionam os codigos JavaScript necessarios para abrir e fechar a janela. O desen- 
volvedor nao precisa criar codigo JavaScript para acionar a janela, eles sao criados 
automaticamente pelo Bootstrap. 

A marca^ao HTML mostrada a seguir e a padrao do Bootstrap para criagao de 
uma janela modal com uso do atributo data-toggle. 

• HTML 

1 . sbutton type="button" class="btn btn-prinary btn-lg" data-toggle="nodal" 

data - target="#P!odalLogin "> 

2. Abrir janela nodal 

3. </button 

4. <div class=''nodal fade" id="nodalLogin" tabindex="-l" role= "dialog" 

aria-labeUedby="nodalLoginLabel' 1 > 

5. <div class= "nodal-dialog" role="docupient"> 

6 . <div class="nodal-content”> 

7. <div class="nodal-header”» 

8 . <button type="button" class="close" data-disniss="nodal" 
aria-label="Close"xspan aria-hidden="true">&tines;</span></button> 

9. <h4 class="nodal-title">Area adninistrativa</h4> 

10 . </div> 

11 . <div class="nodal-body"> 

12 <!-- conteudo da janela nodal --> 
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13. </div> 

14. <div class="nodal-footer"> 

15. cbutton type="button" class="btn btn-default" 

d at3 - di s ni s s=’ 1 nod al" > Fee ha r</button > 

16. </dlv> 

17. </div> <!-- /.nodal-content --> 

18. </div> <!-- /.nodal-dilog --> 


19. </div> <!-- /.nodal --> 


[.../c5/modal-data-toggle.html] 

Codigo comentado: 


Linha(s) Describe) 


Linhas 1 a 3 


Linha 4 a 19 


Linhas 5 e 6 
Linhas 7 a 10 


Linha 11 a 13 


Botao para abertura da janela modal. O atributo data-target deve apon- 
tar para o valor do atributo id do container geral da janela, no nosso 
caso o divttnodal Login na linha 4. Opcionalmente em lugar de lira botao 
para abrir a janela poderiamos usar urn link e neste caso o atributo 
href do link apontaria para o id do container geral da janela, no nosso 
caso href="tinodalLogin". Aclasse btn defmida para o link de abertura da 
janela faz com que os mecanismos internos do Bootstrap transformem 
o link em ran botao. Esse botao pode ser estilizado com uso de classes 
adicionais, tal como btn-prinary e btn-lg. A classe data-toggle, definida 
para aquele link, informa ao Boostrap que a janela modal tera seu script 
de abertura e fechamento inserido automaticamente sem necessidade 
de codi fleacao JavaScript pelo autor. 

Marcagao do div container da janela modal. A classe nodal e de uso 
obrigatorio e informa ao Boostrap que trata-se do container de uma 
janela modal. A classe fade faz com que o efeito de abertura seja por 
deslizamento da janela no sentido vertical, na direcao de cima para 
baixo e com efeito de esmaecimento. Opcionalmente podemos omitir 
o valor fade que produz o efeito de mostrar e esconder a janela sem 
dislazamento e esmaecimento, ou seja, abertura e fechamento fixa na 
sua posigao. Sugiro fazer uma copia do exemplo retirar a classe fade 
veri ficando na pratica os dois efeitos de abertura/fechamento. O atributo 
id e de livre escolha do autor. 

Containeres auxiliares para estilizagao e scripts. 

Marcagao do div. nodal-header container do cabegalho da janela. Esse div 
content o botao superior direito de fechamento da janela (urn xis) e o 
titulo da janela. O atributo data-disniss com o valor nodal informa ao 
Bootstrap que se trata de um botao para fechar a janela. A classe close 
estiliza e posiciona o botao x(xis) de fechamento da janela. 

Marcagao do div. nodal-body container do corpo (conteudo principal) 
da janela. 
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Linha(s) Descrigao (cont.) 

Linha 14 a 16 Marcagao do div.nodal-footer container do rodape da janela. Esse div 
contemobotaoinferiordefechamento dajanela.Oatributodata-dtsniss 
com o valor nodal informa ao Bootstrap que se trata de am botao para 
fechar a janela. 

A renderizagao da janela modal constante do arquivo anterior e conforme mos- 
trada na figura 5.1. 


Area administrativa 

Nome de usuario: 

Sen ha: 


Logi 


U Lembrar meus dados 

Perdeu a senha? 

Fechar 


Figura 5.1 - Janela modal 

52 . 2.2 Com uso de JavaScript nativo 

Ascgunda opgao para acionar o mecanismo de abertura e fechamento da janela 
modal e com uso dos metodos JavaScript nativos do Bootstrap. 

Na verdade, nas duas opgoes o mecanismo usa JavaScript a diferenga e que para a 
primeira opgao sao os mecanismos internos do Boostrap que identificam os atn- 
butos da marcagao HTML e acionam os codigos JavaScript necessarios para abrir 
e fechar a janela e na opgao com JavaScript nativo o desenvolvedor precisa definir 
manualmente os metodos JavaScript proprios do Bootstrap para acionar a janela. 

O metodo nativo para inicializar utna janela modal tern a sintaxe conforme 
mostrada a seguir. 

$( 1 ttnodalLogin' ).nodal( options) 

onde inodaiLogtn e o valor do id do container da janela modal. O nome desse valor, 
obviamente, e de livre escolha do autor e no nosso exemplo usamos nodalLogin. 
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As op goes para esse metodo sao: 


Nome 

Tipo 

Default 

Describe 

backdrop 

boleano 

true 

Define a existencia de urn fundo na cor preta e transparente para a janela 
modal. Pode-se ainda definir o valor static que define o fundo, mas 
desabilita o fechamento da janela quando dicamos nesse fu ndo. 

keyboard 

boleano 

true 

Define o fechamento da janela modal quando a teda Esc e pressionada. 

show 

boleano 

true 

Mostra a janela modal na inirializagao da pagina. 

remote 

path 

false 

0 valor para essa opgao e o url de urn arquivo remoto cujo conteudo sera 
carregado com uso do metodo AJAX load da biblioteca jQuery e injetado 
no container .modal-content. Alternativamente podemos usar o atributo 
href na marcagao HTM L para definir o url remoto a carregar, conforme 
mostrado no exemplo a seguir. 

<a data-toggle= ,, modal" href-'remoto.html" 
data-target-'#modalLogin"> Abrir janela modak/a> 

Esta funcionalidade esta em desuso e sera retirada na versao BS4. 


Opcionalmente, podemos definir as opgoes do metodo JavaScript nativo decla- 
rando-as com uso dos atributos data-*. Por excmplo: data-keyboard="false". 

Sao previstos ainda os metodos conforme as sintaxes mostradas a seguir. 

$('#nodalLogin').rodal("toggle") // Abre e fecha a janela nodal 
$( l #nodalLogin').nodal("s^ 10 w' , ) // Abre a janela nodal 
$('#nodalLogin').nodal("hide") // Fecha a janela nodal 

Os eventos natives sao descritos a seguir. 


Evento 

Descrigao 

show. bs. nodal 

Esse evento ocorre imediatamente apos a chamada de uma instancia do metodo show. 

shown, bs. nodal 

Esse evento ocorre assim que a janela modal torna-se visivel para o usuario (apos as 
transudes CSS terem ocorridoj. 

hide.bs.nodal 

Esse evento ocorre imediatamente apos a chamada de uma insta ncia do metodo hide. 

hidden.bsKnodal 

Esse evento ocorre assim que a janela modal torna-se invisivel para o usuario (apos as 
transigoes CSS terem ocorridoj. 

loaded.bs.nodal 

Esse evento ocorre assim que urn conteudo remoto requisitado e carregado na janela modal. 


No exemplo a seguir mostramos o uso de metodos JavaScript para abertura de 
janela modal e a captura de eventos para abrir uma caixa de alerta JavaScript 
identificando o evento dispar a do. A marcagao HTML e a mesma marcagao usada 
no anterior com a unica diferenga que dela retiramos o par atributo valor data- 
toggle="nodal" conforme mostrado a seguir. 
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• HTML 

1. <button type="button" class="btn btn-prinary btn-lg" d a t a -t o gg les" n odal" data- 
target="#nodalLogin"> 

2. flbrir janela nodal 

3. </button 

4. <div class="nodal fade’ 1 id="nodalLogin" tabindex="-l" role= "dialog" aria- 
labelledby="nodalLoginLabel"> 

5. <div class="nodal-dialog" role="document"> 

... <1-- identico ao exenplo anterior --> 

18. </div> <!-- /'.nodal-dilog --> 

19. </div> <!-- /.nodal --> 

Feitas essa unka altera^ao na marcagao HTML criamos o script con forme mos- 
trado a seguir. 

• JavaScript 

<script type="text/javascript"> 

$( 1 button[data-target="#nodalLogin"] [ ).on('click', functionf) { 

$('#nodalLogin').nodal(’toggle’); 

}>; 

$('#nodalLogin').on('show.bs.nodal', function () { 
alert('Modal vai ser aberta\nEvento: show.bs.nodal'); 

}); 

$('#nodalLogin').on('shown.bs.nodal', function () { 
alert( 1 Modal foi abertalnEvento: shown.bs.nodal'); 

}); 

$('#nodalLogin').on('hide.bs.nodal', function () { 
alert(’Modal vai ser fechada’.nEvento: hide, bs. nodal'); 

1 ); 

$('#nodalLogin').on('hidden.bs.nodal 1 , function () { 
alert(’Modal foi fechada\nEvento:hidden.bs.nodal'); 

)); 

</script* 

</body> 

</htnl> 

[.../cS/modal-javascript.html] 

Visualize esse exemplo online para constatar o disparo dos eventos show, shown, 
hide e, hidden. 
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5.2.3 Dropdown 

Dropdown e uma funcionalidade que permite ao autor criar um cfeito de abertura 
e fechamento dc submenus. Podemos inscrir dropdown nos componentes barras 
de navega^ao, abas e pills estudados no capitulo 4. 

O Boostrap possibilita a cria^ao de menu dropdown com uso de marcagao tipica 
e o mecanismo de abertura do menu pode ser definido de duas formas: direta- 
mente com uso do par atributo/valor data-toggle="dropdown" ou codificando com 
uso do metodo JavaScript dropdown() previsto no Bootstrap. 

5.2.3.1 Com uso de data-toggle 

A marca^ao HTML mostrada a seguir e a padrao do Bootstrap para cria^ao de 
um menu dropdown criado com uso do par atributo/valor data-toggle="dropdown” e 
i riser id o em uma barra de navega^ao (ver [4.7]). 

Notar que o valor do atributo data-target do botao contido em div.navbar-header 
deve ser igual ao id do container geral do menu dropdown. 

• HTML 

<nav class="navbar navbar-default"> 

<div class="navbar-header's 

<bjtton type="button" class="navbar-toggle collapsed" data-toggle="collapse" 

data-target="#barraDataToggle"> 

<a class= "navbar-brand" href="#">Auton6veis</'a> 

</div> 

<div class="collapse navbar-collapse" id="barraDataToggle"> 

<ul class="nav navbar-nav"> 

<U class="active"xa href-TSHone <span class="sr-only’S(current)</spanx/ax/U> 
<lixa href="#">Ford</ax/li> 

<li class="dropdown"> 

<a href="#" class="dropdown-toggle" data-toggle="dropdown" 
role="button" aria-expanded="false">Renault<span class="caret"x/spanx/a> 
<ul class="dropdown-rtenu" role="nenu"> 

<Uxa href =" 8 'SClioc/ a></li> 

</ul> 

</li> 

<li class= "dropdown'S 
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<a href-class="dropdown-toggle" data-toggTe=”dropdown" 
role="button" aria-expanded= "false">Volkswagen<span class=''caret"x/spanx/a> 
<ul class=’'dropdown-menu" role="nenu"> 

<lixa href="#">Novo Col</ax/ll> 

</ul> 

</li> 

<lixa href="#">Contato</ax/li> 

</ulx!-- /.navbar 
</divx!-- /.navbar-collapse --> 

</nav> 

[„./c5/d ropdown-data-toggle.html] 

A render iza^ao da barra de navega^ao com link com efeito dropdown conforme 
mostada na marcagao HTML anterior e conforme a figura 5.2. 


Dropdown em barra de navegapao 

AutomoveiS Home Ford Renault^ 

Vo IKS'wage n ▼ Co ntato 


Novo Go li 

GoE G4 

Fox 

Crossfox 

Outros 



Figum 5.2 - Dropdown cm barra de navega^do. 


S.2.3.2 Com uso de JavaScript nativo 

Asegunda op^ao para obter o efeito dropdown e com uso dos metodos JavaScript 
nativos do Bootstrap. 

Na vcrdade, nas duas op goes o mecanismo usa JavaScript a diferenga e que para 
a primeira opgao sao os mecanismos internos do Bootstrap que identificam os 
atributos da marcagao HTML e acionam os codigos JavaScript necessarios para 
fazer funcionar o dropdown e na opgao com JavaScript nativo o desenvolvcdor 
precisa definir manualmente os metodos JavaScript proprios do Bootstrap para 
acionar o dropdown. 
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O metodo nativo para inicializar urn dropdown tem a sintaxe conforme mostrada 
a seguir. 

$( 'tfdropDownN 1 ).dropdown() 

onde SdoprDownN e o valor do id do elemento ul que content os liks do dropdown. O 
nome desse valor, obviamente, e de livre escolha do autor e no nosso excmplo usa- 
mos dropDownl para o submenu do link “Renault” e dropDown2 para o submenu do link 
“Volkswagen” pois mostramos estes dois links com dropdown na bara de navega^ao. 

Este metodo nao ad mite op^oes. 


Os eventos natives sao descritos a seguir. 


Evento 

Describe 

show.bs.dropdown 

Esse evento otorre imediatamente apos a chamada de uma instancia do metodo show. 

shown + bs.dropdown 

Esse evento otorre assim que a janela modal torna-se visivel para o usuario (apos as 
transires CSS terem ocorrido). 

hide *bs* dropdown 

Esse evento otorre imediatamente apos a thamada de uma instanda do metodo hide. 

hidden.bs.dropdown 

Esse evento otorre assim que a janela modal torna-se invisivel para o usuario (apos as 
transires CSS terem otorrido). 


Estes eventos sao atrelados aos elementos que marcam os links de abertura do 
dropdown e no nosso exemplo adotamos o id="abreDropDownl M para o link “Renault” 
e id="abreDropDown2" para o link “Volkswagen” 

Se os eventos show. bs. dropdown e shown.bs,dropdown fore in dispar ados por a$ao de click, 
esta disponivel a propriedade relatedTarget que retorna o elemento que foi clicado. 

No exemplo a seguir mostramos o uso do metodo JavaScript para abertura de 
dropdown, para a captura de eventos e para inspecionar a propriedade relatedTarget. 
A marca^ao HTML e a mesma marcaijao usada no exemplo anterior, com acrescimo 
dos atributos id conforme mostrado em destaque na marca^ao HTML a seguir. 


Alerta: Ao contrario do componente modal estudado anteriormente para o 
componente dropdown e necessario que o par atributo valor data-toggle="dropdown" 
nao seja retirado da marca^do HTML. 


• HTML 

/* igual a narca^ao do exenplo anterior */ 

<li class="dropdown"> 

<a href="#" class= "dropdown-toggle" data-toggle="dropdown’' role="button" 
aria-expanded=’ , false"> 


Conheca os livros do Maujor: http://livrosdomaujor.com.br 










Capitulo 5 ■ Plugins 


171 


Renaultcspan class-'caret" id="abreDropDownl"x/spanx/a> 

<ul class="dropdown-menu" role="nenu" id="dropDownl"> 

<lixa h ref = 11 #">Clio</ax/li> 

</ul> 

</li> 

<li class="dropdown"> 

<a href= l[ #" class= "dropdown -toggle” data-toggle-'dropdown" role="button" 
aria-expanded="false"> 

Volkswagen<span class="caret" id= 11 abreO ropDown2"></ spanx/ a> 

<ul class="dropdown-pienu" role="nenu” id="dropDownZ"> 
clixa href="#">Novo Gol</ax/li> 

</ul> 

</li> 

<lixa href="#">Contato</ax/li> 

</ulx!-- /.navbar --> 

</divx!-- /.navbar-collapse --> 

</nav> 

O script e conforme mostrado a seguir. 

• JavaScript 

<script type="text/javascript"> 

$('#abreDropDownl, #abreDropDown2"] 1 ).on('click 1 , function() { 

$('#dropDownl, #dropDown2').dropdown('toggle 1 ); 

}>; 

$( 1 .dropdown').cn('show.bs.dropdown', function (e) { 
var textoLink = $(e.relatedTarget).text(); 

alert(’Dropdown vai ser aberto\nEvento: show.bs.d r op down ' ,, n Link clicado: ' + 
textoLink); 

}); 

$( 1 .dropdown').cn('shown.bs.dropdown', function () { 
alert('Dropdown foi abertoinEvento: shown.bs.dropdown'); 

)); 

$( 1 .dropdown').on('hide.bs.dropdown', function () { 

alert(’Dropdown vai ser fechado\nEvento: hide.bs.dropdown’); 

)); 

$( 1 .dropdown').on('hidden.bs.dropdown', function () { 

alert(’Dropdown foi fechado\nEvento: hidden.bs.dropdown'); 

}); 
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</scripts 

</body> 

</htnl> 
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[.../c5/dropdown-javascript.html] 

Visualize esse exemplo online para constatar o disparo dos eventos show, shown, hide 
e, hidden e o uso da propriedade relatedTarget. 


5.2.4 Scrollspy 

Scrollspy e uma funcionalidade que permite ao autor monitorar automaticamente 
a posi^ao da barra de rolagem da pagina quando se rem navega^ao interna (in- 
-page), ou seja, navegagao na propria pagina. 

Navegar na propria pagina significa que o clique em link de urn mecanismo de 
navega^ao em lugar de conduzir o usuario para uma nova pagina (pagina dentro 
do mesmo site ou externa) e conduzido a urn determinado ponto da propria 
pagina (aquela que contein o mecanismo de navega^ao). 

Em geral navega^ao interna e indicada para pagina s extensas com se<joes que po- 
dem ser consultadas (lidas) individualmente sem necessidade de leitura corrida 
para seu entendimento. Por exemplo: pagina FAQ desenvolvida sem o recurso 
do menu sanfona, na qual as perguntas estao inseridas como itens de um menu 
e as respostas como alvo do clique em uma pergunta. 

Outra forma de navegaqao inrerna, para a qual podemos aplicar a funcionalidade 
scrollspy e aquela na qual os conteudos alvo dos links sao inseridos dentro de um 
container com altura fixa e existencia de barra de rolagem para acessar conteudos 
em overflow com aquela altura. 

O mecanismo do Bootstrap para fazer funcionar o scrollspy eonsiste em desta- 
car o link quando o usuario chega ao seu alvo por a^ao de rolagem na barra de 
rolagem ou quando o usuario aciona a barra de rolagem atingindo os alvos dos 
links. So faz sentido projetar scrollspy quando o menu de navega^ao permanece 
fixo e a vista do usuario durante a rolagem. 

A marcagao HTML tlpica para navega^ao interna e conforme mostrada a seguir. 
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<a href="#css">CSS</a> 

<a href="#htnl">HTHL</a> 

<a href="#js l, >javascript</a> 

<div id="css">CSS</div> 

<!-- texto CSS --> 

<div id="css">HTML</div> 

<!-- texto HTML - > 

<div id="css">javascript</div> 

<!-- texto javascript --> 

O atributo href de cada link e igual ao valor do atributo id precedido do sinal # 
(tralha) definido para o eiemento da pagina para o qual se pretcnde navegar. Na 
marca^ao anterior urn eiemento div. 

Existem duas maneiras de se projetar scrollspy: diretamente com uso do par 
atributo/valor data-spy="scroll" ou codificando com uso de metodos JavaScript 
previstos no Bootstrap. Veremos a seguir essas duas maneiras. 

5,2.4.1 Scrollspy para a pagina com uso de data-spy 

Para acionar o mecanismo scrollspy basta declarar os atributos data-spy e data-target 
para o eiemento cuja barra de rolagem se pretende monitorar. No nosso exemplo 
vamos monitorar a barra de rolagem vertical da pagina (janela do navegador). 

Os mecanismos inter nos do Bootstrap identificam aqueles atributos na marcagao 
e acionam os codigos JavaScript necessarios para fazer funcionar o scrollspy O 
desenvoivedor nao precisa criar codigo JavaScript, eles sao criados automatica- 
mente pelo Bootstrap. 

No exemplo a seguir mostramos os codigos para a cria^ao de uma barra de navega- 
^ao fixa (ver [4.7.2]) no topo da pagina destinada a navega^ao interna e utilizamos 
a funcionalidade scrollspy para monitorar a barra de rolagem vertical da pagina. 

• HTML 

1. <body data-spy="scroll" data-target=”#tiarraNavegacao":> 

2. <div class= "container-fluid" id="hone TI > 

3. ... 

4. <nav class="navbar navbar-default navbar-fixed-top" id="barraWavegacao n > 
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5. cdiv class= "container-fluid "> 

6 . div class="navbar-header"> 

7. cbutton type="button'' class=''navbar-toggle collapsed" data-toggle=''collapse" 

data - target= "ffbar raFixaTop "> 

8 . 

9. </button> 

1C. <a class=”ravbar-brand" href="#">Sitec/a> 

11 . </div> 

12. cdiv class="collapse navbar-collapse" id="barraFixaTop"> 

13. <ul class="nav navbar-nav"> 

14. <li class="active"xa href="#hofie">Hone<span class=''sr-only">(current)</span> 

</ax/li> 

15. clixa h ref="#po rtfolio"> Portf6lio</ax/li> 

16. clixa href="#naterias">flaterias</ax/li> 

17. clixa href="#cont3to M >Cont3toc/a>c/li> 

18. </ul> 

19 </divx!-- /.navbar-collapse --> 

20 . </divx! - - / .container - fluid - - > 

21 . </nav> 

22 . <div id="portfolio"> ... </div> 

23. cdiv id="Fiaterias">... </div> 

24. cdiv id="contato"> ... </div> 

25. ... 


[.../c5/scrol lspy-body-data-spy.htm I] 

Codigo comentado: 


Linha(s) Descrigao 


Linha 1 


Linhas 4 a 21 


Linhas 14 a 17 


Para fazer funcionar o plugin scrollspy basta acrescentar os pares atri- 
buto/valor data -spy= 11 sc roll" e data-target="valor" no elemento body da 
pagina a monitorar a rolagem. O valor do arributo data-target e o do 
seletor que define o container do mecanismo de navega^ao, no nosso 
exemplo navttbarraHavegacao que eo id do elemento nav container da barra 
de navegagao. 

Marcagao que cria uma barra de navegagao fixa no topo da pagina. Ver 
[4.7.2], Notar na linha 4 o container da barra de navegagao com o id 
de valor igual barrallavegacao que foi referenciado no atributo data- target 
do elemento body corao descrito no item anterior. 

Marcagao dos links da barra de navegagao com o atributo href apontando 
para o id do container de conteudos de cada link corao mostrado nas 
linhas 2,22, 23 e 24 respectivamente. 
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Em [4.7.2], quando estudamos barras de navegagao fixas dissemos o seguinte: 


Ao optar pelo uso de uma barra de navegagao fixa e preciso definir um 
padding de no minimo 50px para o elemento body com a finalidade de 
abrir espago para insergao da barra. Declare padding-top e/ou padding- 
bottom conforme use barra fixa no topo e/ou rodape. 

Nesse exemplo, ao clicarmos um link, a pagina rola para o texto do elemento 
alvo do link (um elemento div) que e colocado no topo da janela. Como ternos 
uma barra de navegagao fixa no topo ela ira cobrir o inicio daquele texto ate uma 
altura de 50px, que e a altura da barra de navegagao. Entao, precisamos declarar 
regras de estilo para fazer o texto alvo do link descer no minimo 50px e sair de 
tras da barra de navegagao. Para isso acrescente a seguinte folha de estilo a pagina: 

• CSS 

body { padding-top:50px;background: ftccc; } 

(^portfolio, #naterias, Wcontato { 
padding-top: SOpx; 

/* 0 padding-top aqui e necessario para posicionar o container do conteudo abaixo da 
barra fixa */ 

} 

Os valores definidos na folha de estilo mostrada sao validos para a aplicagao pa- 
dr ao de estilos do Bootstrap em layouts fixos. Sc necessario altere aqueles valores 
para eontemplar as particular id ades do sen projeto. 

Ao consultar esse arquivo clique os links da barra de navega^ao e depois movi- 
mente a barra de rolagcm da pagina para cima e para baixo observando o plugin 
scrollspy em a^ao. 

S.2.4.2 Scrollspy em container com uso de data-spy 

No exemplo a seguir mostraremos a cria^ao de uma barra de navegagao basica 
destinada a comandar a navegagao em um container da pagina e utilizamos a 
funcionalidade scrollspy para a barra de rolagem vertical do container. A barra de 
rolagem no container sera criada com uso das propricdades CSS height e overflow 
para o container. 

Usaremos a mesma marcagao HTML do exemplo anterior com as modificagoes 
conforme mostradas em destaque a seguir. 
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• HTML 

1. cbody data-spy-'scroll" data-target="#barraNavegacao"> 

2. <div class= "container-fluid" vd="home"> 

3. ... 

4. <nav class="navbar navbar- default navbar-fixed-top" id="barraNavegacao"> 

5. <div class= "container-fluid "> 

6. div class="navbar-header"> 

7. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 

data-target="#barraFixaTop"> 

8 . 

9. </button> 

10. <a class="navbar-brand" href="#">Site</'a> 

11. </div> 

12. <div class="collapse navbar-collapse" id="barraFixaTop”> 

13. <ul class="nav navbar-nav"> 

14. <11 dass=" active” ><a href="#hone" >Home<span class= n sr-only">(current)</span></a></ll> 

15. <li class="active"xa href ="#portfolio ">Portfolio<span class="sr- 
only">( current )</span></ax/li> 

16. <lixa href="#naterias">flaterias</ax/li> 

17. <lixa href="#contato">Contato</ax/li> 

18. </ul> 

19 </divx!-- /.navbar-collapse --> 

20. </divx!-- /.container-fluid --> 

21. </nav> 

22. <div id="containerConteudo" data-spy-'scroll" data-target="#barraHavegacao"> 


23. 

<div id="portfolio"> 

... </div> 

24. 

<div id="naterias">.. 

. </div> 

25. 

<div id="contato"> .. 

. </div> 

26 

</div> 


27. 

... 



[.../c5/scrol lspy-container.html] 

Nesse exemplo foramen to o aparecimento de uma barra de rolagem no container. 
Para isso acrescente a seguinte folha de cstilo a paginal 

• CSS 

<style type="text/css ir > 

ScontainerConteudo { 
height: 400px; 
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overflow-y: scroll; 

} 

</stylo 

Ao consultar esse arquiro clique os links da barra de navega^ao e depois mo- 
viraente a barra dc rolagem do container para cima e para baixo observando o 
plugin scrollspy em a^ao. 

S.2.4.3 Scrollspy com JavaScript nativo 

Na verdade, nas op^oes com uso de data-spy e com uso de JavaScript o mecanismo 
do plugin usa JavaScript. A diferemja e que para a prirneira op^ao sao os meca- 
nismos internos do Bootstrap que identificam os atributos da marca^ao HTML 
e acionam os codigos JavaScript necessarios para fazer funcionar scrollspy e na 
op^ao com JavaScript nativo o desenvolvedor precisa definir manualmente os 
metodos JavaScript proprios do Bootstrap para acionar a janela. 

O metodo nativo para inicializar scrollspy tem a sintaxe conforme mostrada a 
seguir. 

$( 1 xpto').scroll spy(options) 

onde xpto identifica o container do elemento a monitorar a barra de rolagem. O 
escolha desse identifkador, obviamente, e de livre escolha do autor. 


Existe uma op^ao para esse metodo conforme descrita a seguir. 


Nome 

Tipo 

Default 

Oescrigao 

offset 

numero 

10 

Retorna o valor em pixel da distancia ate o topo quando efetua-se o 
calculo da posi^ao da barra de rolagem. Importante notar queessa 
op^ao nao define a distancia, ela apenas retorna a distancia. 


E previstos ainda o metodo conforme a sintaxe mostrada a seguir. 


$( 1 xpto').spy(’refresh 1 ) // Para insen;6es dinanicas no DOM 

Esse metodo e util para atualizar o plugin quando ha inser^ao dinamica no 
DOM ja carregado. A sintaxe geral para aplicar o metodo em todos os scrollspy 
constantes da pagina e mostrada a seguir. 

$('[data-spy=”sc roll"]')-each(function () { 
var $spy = $(this).scrollspy('refresh') 

}); 

O evento nativo e descrito a seguir. 
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Evento 

Descried 

activate 

Esse evento ocorre quando um novo link e ativado peb scrollspy. 


Aseguir mostraremos o mcsmo exemplo constante do item [5.2.4.1] anterior para 
demonstrar o uso de JavaScript nativo para essa funcionalidade, 

• HTML 

<:body> //retiramos os atributos data-* 

<!-- tgual a narca^ao do item [5.2.4.1] --> 

[„./c5/scrol Ispy-iavascri pt.html ] 

Notar que foram retirados os atributos data-* do elemento body. 

O codigo JavaScript e mostrado a seguir. 

• JavaScript 

<script type=”text/javascript"> 

$('body').scrollspy( {target: 'KbarraNavegacao'} ).on('activate.bs.scrollspy', 
function () { 

alert('Foi ativado scrollspy'); 

}); 

</scripts 
</body> 

</htnl> 

Ao consultar esse arquivo clique os links da barra de navega^ao c depois movi- 
mente a barra de rolagem da pagina para cima e para baixo observando o plugin 
scrollspy em aqao. Observe o disparo do evento activate.bs.scrollspy toda vez que 
se clica um link na caixa de alerta JavaScript. 


5.2.5 Abas 

Abas e uma funcionalidade que permite ao autor criar um mecanismo de navegagao 
baseado em abas, ou seja, quando o usuario clica em um link contido em uma aba 
(ou em pill) o conteudo alvo do link e apresentado em uma area fixa na pagina. 

Existemduas maneiras de se projetar navega^ao em abas: diretamente com uso do 
par atributo/valor data-toggle="tab" ou codificando com uso de metodos JavaScript 
previstos no Bootstrap. Veremos a seguir essas duas maneiras. 
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A cria^ao de abas e pills foi estudada era [4.6] onde mostramos corao criar os 
diferentes ripos de aba e pill, mas sem acrescentar a funcionalidade da navega^ao. 
Veremos a seguir abas em funcionamento. 

5.2.5.1 Abas com uso de data-toggle 

Para acionar o mecanismo de navega^ao em abas basra dcclarar os atributos data- 
toggle="tab" para cada um dos elementos a que marcara os links das abas. 

Os mecanismos inter nos do Bootstrap identificam aquele atributo na raarca^ao 
e adonam os codigos JavaScript necessarios para fazer funcionar a navega^ao 
em aba. O desenvolvedor nao precisa criar codigo JavaScript, eles sao criados 
automaticamente pelo Bootstrap. 

No exemplo a seguir mostraremos a cria^ao de uma aba de navega^ao padrao. 

• HTML 

1. <body> 

2. <ul class="nav nav-tabs" role="tablist"> 

3. <Vi role= "presentation" class="active"xa href="tthone' r aria-controls= "hone" 

role="tab" data-toggle="tab">Hone</ax/li> 

4. <li role="presentation"><a href="#portfolio" ari.a-controls="portfolio" role="tab" 

data-toggle="tab">Portfdlio</a></li> 

5. <li role= "presentation "xa href="#artigos’' aria-controls="artigos" role="tab" 

data-toggle="tab">Artigos</ax/li> 

6. <li role= "presentation"xa href="#contato" aria-controls="contato" role="tab" 

data-toggle="tab">Contato</ax/li> 

7. </ul> 

B. <div class=”tab-content"> 

9. <div role="tabpanel" class="tab-pane fade in active" id="hone"> 

11. <h4>Hone</h4> 

12. <p>Loren ipsum.,.</p> 

13. </div> 

14. <div role="tabpanel" class="tab-pane fade" id="portfoTio"> 

15. <h4>Portfolio</h4> 

16. <p>Curabitur hendrerit...</'p> 

17. </div> 

19. <div role="tabpanel" class="tab-pane fade" id="artigos"> 

2G. <h4>Artigos</h4> 

21. <p>Pellentesque sapien...</p> 

22. </div> 
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19. <di.v role="tabpanel" class=”tab-pane fade" id="contato M > 

20. <h4>Contato</h4> 

21. <p>Cun sociis natoque...</p> 

22. </div> 

23. </div> <!-- /.tab-content 

[.../c5/aba-data-toggle.html] 

Codigo comcntado: 

Linha(s) Descrigao 

Linhas 2 a 7 Links da aba. O atributo href do link tem como alvo o valor do id do 
container dos conteudos de cada aba. 

Linhas 8 e 23 Container de todo o conreudo a ser exibido nas abas. Esse container 
devera receber a classe tab-content. 

Linhas 9 a 22 Cada um dos conteudos de uina aba devera estardentro de um container 

dlv ao qual atribui-se a classe tab-pane e o id com valor igual ao valor 
do atributo href (sent o sinal tralha) do link que inostra o conteudo. 
Notar as classes fade e in no container, elas se destinam a adicionar o 
efeito fade na abertura/fechamento das abas e a classe in deve ser usada 
somente na aba inicialmente ativa. 


Dica: Osatributos role e aria- 1 * constantes da marca^ao sao usados para contemplar 
criterios de acessibilidade. 


Neste exemplo criamos uma folha de estilos incorporada ao arquivo com a finali- 
dade de personal izar as abas. A folha de estilos e mostrada e co men tad a a seguir. 

• CSS 

<style rel="stylesheet"> 
body { background: #ccc;} 
h2 {font-size:20pxj} 

.tab-content { 

height: 250px; /* Unitanos a altura da ara de nostra dos conteudos */ 

overf!ow-y:auto; /* barra de rolagen para conteudos que ocupen altura 
naior que o Unite 25Gpx */ 
border: 3px solid Jtfff; 
borde r-botton-left- radius:5px; 
border-botton-right-radius:5px; 

} 

.tab-content h2 { nargin-top:3px; } /* sobrescrevenos a nargen padrao de h2 */ 

#hone,flportfolio,#artigos,Icontato { 
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color: #fff; 
padding: 0 15px; 

} 

fthone { background: #333; } 

#portfolio { background: #930;} 
iartigos { background: #030;} 

Scontato { background: #036;} 

.nav-tabs > li > a { /* crinos cor de fundo para os links nas abas */ 

background: SeOdbdb; 

} 

</style> 

5.2.5.2 Abas com JavaScript nativo 

Na verdade,nas op^oes com uso de data-toggle e com uso dc JavaScript o mecanis- 
mo do plugin usa JavaScript. A diferen^a e que para a primeira op^ao sao os me- 
canismos internos do Bootstrap que identificatn os atributos da marca^ao HTML 
e acionam os codigos JavaScript necessarios para fazer funcionar a navega^ao 
em abas e pills e na op^ao com JavaScript nativo o desenvolvedor precisa definir 
manualmente os metodos JavaScript proprios do Bootstrap para acionar as abas. 

O metodo nativo para inicializar abas tern a sintaxe conforme mostrada a seguir. 

$( 1 a 1 ).tab( 1 show') 

onde a identifica o elemento link na navega^ao da aba. Esses c o unico metodo 
deste plugin e se destina a mostrar e esconder os conteudos da abas. 


Os eventos natives sao descritos a seguir. 


Evento 

Descrigao 

show.bs.tah 

Esse evento ocorre quandoo usuario dica uma aba, masoconteudodelaainda naofoi mostrado. 

shown.bs.tab 

Esse evento ocorre quando o conteudo da aba dicada e mostrado. 

hide.bs.tab 

Esse evento ocorre antes de uma aba ser fechada em consequencia de o usuario ter dicado em 
outra aba. 

hidden .bs.tab 

Esse evento ocorre depois que uma aba for fechada em consequenda de o usuario ter dicado em 
outra aba. 


E m todos estes eventos estao disponiveis as propriedades event. ta rget c event. relatedTa rget 
que retornam o URL da aba a ser aberta e o URL da aba ativa (a ser fechada). 

No exemplo a seguir usamos a mesma marca^ao do exemplo mostrado no item 
anterior [5.2.5.1], retirando apenas o atributo data-toggle da marca^ao HTML 
conforme mostrado a seguir. 


Conheca os livros do Maujor: http://livrosdomaujor.com.br 








182 


Boostrap 3.3.5 


• HTML 

1. <body> 

2. <ul class="nav nav-tabs" role=''tabl\st"> 

3. <li role= "presentation" class="active"xa href="#hone" aria-controls= "hone" 

role="tab" data-toggle^' tab 11 >Hone</ax/li> 

4. <li role= "presentation"xa href="#portfoUo" aria-controls="portfolio" role="tab" 

data-toggU="tab">Portfolio</ax/li> 

5. <li role= "presentation"xa href="#artigos" aria-controls="artigos" role="tab" 

data-toggle="tab">Artigos</ax/li> 

6. <li role= "presentation"xa href=”#contato" aria-controls="contato" role="tab" 

data-toggle="tab">Contato</ax/li> 

7. </ul> 

8. a 22. <!-- igjal ao exenplo anterior --> 

23. </div> <!-- igual a narca<;ao do iten [5.2.5.1] --> 

[„./c5/abas-javascript.html] 

O codigo JavaScript e mostrado a seguir. 

• JavaScript 


<script type="text/javascript"> 

$('a[role="tab"]').on('click', function(e) { 
e.preventDefault; 

$(this).tab(’show'); 

)>; 

$('a[role="tab"]').on('show.bs.tab', function (e) { 
var tabAbrir = e.target // Abra a ser aberta 
var tabFechar = e.relatedTarget // Aba ativa a ser fechada 
alert('Aba: '+tabAbrir+ 1 vai ser aberta\n\nAba: ’+tabFechar+ 1 vai ser fechada\n\ 
nEvento: show.bs.tab 1 ); 

)); 

</script> 

</body> 

</htnl> 

Ao consultar esse arquivo clique os links das abas. Observe a caixa de alerta 
JavaScript a cada clique era uraa aba. 
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5.2.6 Tooltip 

No jargao do descnvolvimenro web a palavra inglesa tooltip foi traduzida para 
o portugues como dica de contexto E aquela nossa conhecida funcionalidade que 
permite abrir uma pequena janela popup, quando o usuario passa o mouse sobre 
uma palavra, contendo um texto explica tivo, ou uma dica sobre a palavra. 

Existem duas maneiras de se projetar tooltip: diretamente com uso do par atri- 
buto/valor data-toggle="tooltip" ou codificando com uso de metodos JavaScript 
previstos no Bootstrap. Veremos a seguir essas duas maneiras. 

5.2.6.1 Tooltip com uso de data-toggle 

Para criar um tooltip basta declarar o atributo data-toggle= "tooltip" para o elemento 
HTML que devera ser o container da palavra que ira disparar o tooltip. O texto da 
tooltip sera o valor do atributo title daquele elemento. Observe a seguir a marcagao 
tipica para criar um tooltip em uma palavra de um texto cor rente e era um botao. 

<a href="8" data-toggle="tooltip" title="Fruta tropical">Pupunha</a> 
cbutton type="button" class="btn btn-default" data-toggle="tooltip" 
title="Fruta tropical">Pupunha</buttons 

Os mecanismos internos do Bootstrap identificam aquele atributo na marca^ao 
e acionam os codigos JavaScript necessarios para fazer funcionar o tooltip. O de- 
senvolvedor nao precisa criar codigo JavaScript, eles sao criados automaticamente 
pelo Bootstrap. 

Por padrao o texto do tooltip e na cor branca, inserido em uma caixa na cor 
prcta com bordas arredondadas e posicionado na parte superior da palavra que 
dispara o tooltip. 

E possivel alterar a posi^ao da caixa com uso do atributo data-placement e seus 
valores: top, right, bottom e left, scndo top o valor padrao. Mostrainos a seguir as 
sintaxes para posicionamento. 

// padrao no topo 

<a href="ft" data-toggle="tooltip" title="fruta tropical">Pupunha</a> 

//a direita 

<a href="(t” data-toggle^'tooltip 1 * data-placenent=”right" title= ; ’Fruta tropical’’>Pupunha</a> 

// enbaixo 

<a href=”#“ data-toggle=’'tooltip” data-placenent="bottom" title="Fruta tropicar'>Pupunha</a> 
// a esquerda 

<a href="#' ! data-toggle=”tooltip" data-placenent-’left" title="Fruta tropical”>Pupunha</a> 
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No exemplo a seguir mostraremos a criagao de tooltips nas quatro posigoes 
possiveis. 

• HTML 

<p>As frutas de 

<a href="ft" data-toggle="tooltip" title= r, nedia ad.ua de 10°C... "sclina tenperado</a> 
sao ... lenhosos ou 

<a href = "ft" data-toggle="tooltip" data-placenent="left" 
title="plantas trepadeiras lenhosas">Uanas</a>. 

Contudo elas nao ... 

As prindpais frutas de clina tenperado sao a 

<a href=' 1 #" data-toggle="tooltip" data-placerient="right" title="E ur fruto ...">ameixa</a>, 
a aneixa-japonesa, a cereja-doce, o danasco, a 
<a href="ft" data-toggle="tooltip" data-placepient= n bottoFi" 

title="None dentifico: Rubus idaeus">frartboesa</a> J a naga_</p> 

/* Mats quatro exenplos con tooltips en botoes */ 

• JavaScript 

<script type="text/javascript"> 

$( 1 [data-toggle="tooltip"]').tooltip(); 

</script> 

</body> 

</htnl> 

[.../c5/tooltip-ali n hamento.htm I] 

O coraponentc tooltip, inesrno quando criado corn uso do atributo data-toggle 
precisa, obrigatoriaraente, ser inicializado manualmente pelo desenvolvedor, 
conforrac o codigo JavaScript mostrado, ou seja, d ever a ser declarado o metodo 
tooltipO para o elemento que o dispara (no nosso exemplo [data-toggle="tooltip"]). 

Ao visualizar este exemplo passe o mouse sobre as palavras era destaque (cor 
azul por padrao) no texto e sobre os botoes para ver o tooltip cm agao nas suas 
quatro posigoes possiveis. 

S.2.6.2 Tooltip com JavaScript nativo 

Na verdade, nas opgoes com uso de data-toggle e com uso de JavaScript o meca- 
nismo do plugin usa JavaScript. A diferenga e que para a primeira opgao sao os 
mecanismos internes do Bootstrap que identificam os atributos da marcagao 


Conheca os livros do Maujor: http://livrosdomaujor.com.br 


Capitulo 5 ■ Plugins 


185 


HTML e acionam os codigos JavaScript necessaries para fazer funcionar o tooltip 
e na op^ao com JavaScript nativo o desenvolvedor precisa definir manualmente 
os metodos JavaScript proprios do Bootstrap para acionar o tooltip. 

O metodo nativo para inicializar urn tooltip tem a sintaxe conforme mostrada 
a seguir. 

$( ' seletor 1 ),tooltip(options) 

onde seletor e uma referenda ao elemento container da palavra que dispara o 
tooltip. 


As op^oes para esse metodo sao: 


Nome 

Tipo 

Default 

Descri^ao 

animation 

boleano 

true 

Aplica o efeitofade ao mostrar/esconder o tooltip. 

html 

boleano 

false 

0 valor marca^ao HTML define que o conteudo do tooltip sera a 
marca^ao HTML aqui definlda em lugar de texto simples. 

placement 

string ou 
funjao 

'top' 

Define o posicionamento do tooltip em rela^ao a palavra 
que o dispara. Os valores possiveis sao: top, right, bottom e 
left. Admite ainda a combina$ao de auto com um dos quatro 
posicionamentos, por exemplo: 'auto left' que posiciona 
a esquerda quando ha espa^o a esquerda e a direita caso 
contrario. 

selector 

string 

false 

Essa op^ao permite que se delegue a fun^ao de disparar o 
tooltip a um determinado seletor. Isso fa z com que seletores 
inseridos no DOM dinamicamente herdem a funcionalidade 

tooltip. 

title 

string on 
fun^ao 

1 i 

Com uso dessa op^ao podemos definir um texto padrao para 
o tooltip. Para visualizar o texto padrao e necessario que o 
atributo title nao seja definido no elemento container do 
tooltip. Se for definido, sobrescrevera o texto padrao. 

trigger 

string 

'hover focus' 

0 valor para essa op^ao define o evento que dispara o tooltip. 

Os valores possiveis sao: dick, hover, focus e manual. E admitido 
usar ma is de um valor e nesse caso devem-se separar os valores 
com espa^o. 0 valor manual nao pode ser combinado com outro 
valor. 

delay 

numero ou 

object 

0 

Define o tempo, em milissegundos, de retardo para abertura 
e fechamento do tooltip. Por exemplo, numero: delay: 200 ou 
objeto: delay: {show: 100, hide: 200}. Nao se aplica para a 
op^ao trigger: "manual". 

container 

string ou 
false 

false 

Define um container ao qual o tooltip sera anexado. Por 
exemplo: container: 'ffjanelaModal'. 
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Nome 

Tipo 

Default 

Descri^ao 

template 

string 

<div 

dass="tooltip'' 

role="too!tip"> 

<div 

class="to-oltip- 

arrow"> 

</div> 

<div 

class="tooltip- 

inner"> 

</divx/div>' 

Marcaqio HTML base a usar para criar um tooltip. 0 valor do 
atributo title sera injetado no elementocom a dasse tooltip- 
inner, a setinha sera injetada no elemento com a dasse tooltip- 
arrow. 0 container geral e no elemento com a dasse .tooltip. 

viewport 

string ou 
object ou 
function 

{selector: 'body 1 , 
padding: 0} 

Confina o tooltip aos limites do seu elemento. 


Sao previstos ainda os metodos conforme as sintaxes mostradas a seguir. 

$('seletor').tooltip( "show" ) // Mostra o tooltip 

$('seletor').tooltip( "hide" ) // Esconcfe o tooltip 

$('seletor').tooltip{ "toggle" ) // fllterna raostra/esconde o tooltip 
$('seletor').tooltip( "destroy") // Esconde e destroi o tooltip 

Os eventos nativos sao descritos a seguir. 


Evento 

Describe 

show.bs.tooltip 

Esse evento ocorrequandoo usuario dispara o tooltip, mas o conteudo dele ainda 
naofoi mostrado. 

shown.bs.tooltip 

Esse evento ocorre quando o conteudo do tooltip e mostrado. 

hide.bs. tooltip 

Esse evento ocorre imediatamente a ntes de o tooltip serfechado. 

hidden.bs. tooltip 

Esse evento ocorre depois que o tooltip foi fechado. 

inserted.bs.tooltip 

Esse evento ocorre depois do evento show.bs.tooltip quando o 
template do tooltip for adicionado ao DOM. 


O exemplo a seguir demonstra a cria^ao de tooltips acionados por JavaScript 
nativo, bem como o uso de algumas op<joes do metodo tooltip(). 

• HTML 

<div class="row"> 

<div class="col-nd-6 ufi"> 

<h4>Op?oes:<br> 
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<p>A <a href="#f">maga</a> e uma das principals frutas do clima temperado.</p> 
</div> 

<div class=" col-md-6 dois'S 
<h4>Oppoes:<br> 

<p>A <i>maga</i> e una das principais frutas do cl in a temporado.</p> 

</'div> 

</div> <1-- /.row --> 

<div class="row"> 

<div class=" col-md-6 tres'S 
<h4>Opgoes;<br> 

<p>A <a href="#">maga</a> e uma das principais frutas do clima temperado.</p> 

</'div 

<div class=" col-md-6 quatro'S 
<h4>0p<;6es: <br> 

<p>A <a href="#">maga</a> e uma das principais frutas do clima temperado.</p> 
</div> 

</div> <1-- /.row --> 

<div class="row"> 

<div class=" col-lg-12 % 

<pxa href="#" class=''cinco">Clique aqui</a> para mostrar/esconder o segurdo 
tooltip da pagina.</p> 

</div> <!-- /.col-lg-12 --> 

</div> <1-- /.row --> 

[.../c5/tooltip-javascript.html] 

Notar que nao ha neccssidade dc se usar atributos data-*. 

O codigo JavaScript e mostrado a seguir. 

• JavaScript 

<script type="text/javascript’s 
$(Sum a').tooltip{ { 
trigger: ' click', 
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title: 'Conten vitaninss 81 e B12', 
placement: 'right' 

}); 

$( 1 .dois i').tooltip{ { 
htnl: true, 

title: 1 <ing src="naca.jpg'V, 
placement: 'top' 

}); 

$('.tres a').tooltip{ { 
htnl: true, 

title: '<h3>Titulo do texto</h3xp>Paragrafo con o texto</p> 1 , 
delay: { show: 500, hide: 1000 } 

}); 

$('.quatro a').tooltip( { 
htnl: true, 

title: 1 <ing src= "naca. jpg’V, 
anination: false 

}); 

$('.cinco 1 ).on('click 1 , function(event) { 
event.preventDefault(); 

$( 1 .dots i 1 ).tooltip('toggle'); 

}); 

</scripts 
</body> 

</html> 

Ao consultar esse arquivo passe o mouse (ou clique) a palavra ma^a em cada um 
dos quatro textos para verificar o disparo do tooltip. 


5.2.7 Popover 

Popover e uma funcionalidade semelhante ao tooltip. Destina-se a fornecer infor- 
magao adicional sobre uma determina palavra de um texto. Enquanto o tooltip 
e indicado para apresentar uma pequena dica informativa o popover destina-se 
a fornecer uma explica gao mais detalhada. 
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Existem duas maneiras de se projetar popover: diretamente com uso do par 
atributo/valor data-toggle="popover" ou codificando com uso de metodos JavaScript 
previstos no Bootstrap. Veremos a seguir essas duas maneiras. 

5.2.7.1 Popover com uso de data-toggle 

Para criar um popover basta declarar o atributo data-toggle="popover" para o ele- 
mento HTMLque d ever a ser o container da palavra que ira disparar o popover. O 
titulo do popover sera o valor do atributo title e o texto do popover sera o valor 
do atributo data-content daquele elemento. Observe a seguir a marca^ao tipica para 
criar um popover em uraa palavra de um texto corrente e cm um botao. 

<a href-'#" data-toggle= "popover" title="Infornacoes nutncionais’ 1 
data-content="0 consuno... "snagac/axbutton type="button" 
class="btn btn-default" data-toggle="popover" 

tvtle="Infom3gbes rutricionais” data-content='0 consuno...">naga </button> 

Os mecanismos intemos do Bootstrap identificam os atributos data-* na marcagao 
e acionam os codigos JavaScript necessarios para fazer funcionar o popover. O 
desenvolvedor nao precisa criar codigo JavaScript, eles sao criados automatica- 
mente pelo Bootstrap. 

For padrao o texto do popover e na cor preta, inserido em uma caixa na cor branca 
com uma barra cinza no topo para acomodar o titulo do popover, as bordas sao 
arredondadas e posicionada a direita da palavra que dispara o popover. 

E possivel alterar a posi^ao da caixa popover com uso do atributo data-placement e 
seus valores: top, right, bctton e left, sendo right o valor padrao. Mostramos a seguir 
as sintaxes para posicionamento. 

<a href="#' [ data-toggle= "popover" title="Fruta tropical">naga</a> j j padrao a direita 
<a href="#” data-toggle= ,, popover : ’ data-placenent=“top" .. .>naga</a> // no topo 
<a href="#” data-toggle="popover” data-placenent=“botton" .. . >naga</a>// enbaixo 
<a href=”#' 3 data-toggle=”popover 3 ' data-placenent="left" . ..>naga</a> // a esquerda 

No exemplo a seguir mostraremos a criagao de popover nas quarro posi^oes 
possiveis. 

• HTML 

<h4>Popover a direita</h4> 

<p>A <a href="#" data-toggle="popover" data-placenent="right" 
title="Infomagdes rutricionais" 

data-content=”0 consuno ...">naga</a> e una das principals frutas do clina tenperado.</p> 
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<h4>Popover a direita</h4> 

<p>A <a href= " data-toggle="popover" data-placenent="top" 
ti.tle="Infomagdes rutricionais" 

data-content=”0 consumo .. .">naga</a> e una das principals frutas do clina temperado.</p> 
<h4>Popover a direita</h4> 

<p>A <a href=”#" data-toggle="popover" data-placenent="bottoFi" 
title=”Infornag6es nutricionais” 

data-content=”0 consumo ...">maga</a> e uma das principais frutas do clina temperado.</p> 
<h4>Popover a direita</h4> 

<p>A <a href="# r ’ data-toggle="popover" dat3-placerient=”ieft" 
title="Informagdes rutricionais” 

data-content="0 consumo ...">maga</a> e uma das principais frutas do clina tenperado.</p> 
/* Mais quatro exenplos com popover em botoes */ 

• JavaScript 

<script type= "text/javascn.pt"> 

$( 1 [data-toggle="popover"]).popover(); 

</scnpt> 

</body> 

</html> 

[.../c5/popover-data-togg!e,html] 


Alerta: O funcionamento do componente popover requer a inclusao do plugins 
popover e tooltip. 


O componente popover, mesmo quando criado com uso do atributo data-toggle 
precisa, obrigatoriamente, ser inicializado manualmente pelo desenvolvedor, 
conforme o codigo JavaScript mostrado, ou seja, devera ser dedarado o metodo 
popouerQ para o elemento que o dispara (no nosso exemplo [data-toggle=”popover"]). 

Ao visualizar este exemplo clique sobre a palavra ma<ja {cor azul por padrao) nos 
textos para ver o popover em agao nas suas quatro posi^oes possiveis. 

5.27.2 Popover com JavaScript nativo 

Na verdade, nas opgoes com uso de data-toggle e com uso de JavaScript o meca- 
nismo do plugin usa JavaScript. A diferen^a e que para a primeira opgao sao os 
mecanismos infernos do Bootstrap que identibeam os atributos da marca^ao 
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HTMLe acionam os codigos JavaScript necessaries para fazer funcionar o popover 
e na op^ao com JavaScript nativo o descnvolvedor precisa definir manualmente 
os metodos JavaScript proprios do Bootstrap para acionar o popover. 

O metodo nativo para inicializar urn popover tern a sintaxe conforme mostrada 
a seguir. 

$( ' seletor 1 ).popover(options) 

onde seletor e uma referenda ao elemento container da palavra que dispara o 
popover. 


As op^oes para esse metodo sao: 


Nome 

Tipo 

Default 

0escri;ao 

animation 

boleano 

true 

Aplica o efeito fade ao mostrar/esconder o popover 

html 

boleano 

false 

0 valor marca^ao HTML define que o conteudo do 
popover sera a marcacaoHTMLaquidefinidaem lugar 
detexto simples. 

placement 

string ou 
fun^ao 

right' 

Define o posicionamento do popover em rela^ao a 
palavra que o dispara. Os valores possfveis sao: top, 
right, bottom e left. Admiteainda a combi na^ao 
de auto com um dosquatro posicionamentos, por 
exempio: 'auto left 1 que posiciona a esquerda quando 
ha espa^o a esquerda e a direita caso contrario. 

selector 

string 

false 

Essa op^ao permite que se delegue a fun^ao de disparar 
o popover a um determinado seletor. issofaz com que 
seletores inseridos no DOM dinamicamente herdem a 
funcionalidade popover. 

title 

string ou 
fun;ao 

r r 

Com uso dessa op^ao podemos definir um titulo 
padrao para o popover. Para visualizar o titulo padrao 
e necessa rio que o atributo title nao seja definido 
no elemento container do popover. Se for defi nido, 
sobrescrevera o titulo padrao. 

trigger 

string 

'click' 

0 valor para essa opjao define o evento que dispara 
o popover. Os valores possiveis sao: dick, hover, focus 
e manual. E admitido usar mais de um valor e nesse 
caso devem-se separar os valores com espa^o. 0 valor 
manual nao pode ser combinado com outro valor. 

content 

string ou 
fun;ao 

t r 

Define o conteudo descritivo do popover desde que o 
atributo data-content nao tenha sido definido. 

delay 

numero 

ou 

object 

0 

Define o tempo, em milissegundos, de retardo para 
abertura e fechamento do popover. Por exempio, 
numero: delay: 200 ou objeto: delay: {show: 100, hide: 
200}. Nao se aplica para a op^ao trigger: "manual". 


Conheca os livros do Maujor: http://livrosdomaujor.com.br 














192 


Boostrap 3.3.5 


Nome 

Tipo 

Default 

Descri(ao 

container 

string ou 
false 

false 

Define um container ao gual o popover sera anexado. 

Por exemplo: container: 'jfjanelaModal 1 . 

template 

string 

'<div dass=''popover" 
role=" popover “> 

<div dass='' popover-arrow''> 
</div> 

<div class=" popover-inner’’> 
</divx/div>‘ 

Marcaqio HTML base a usar para criar um popover. 

0 valor do atributo title sera injetado no elemento 
com a classe popover-inner, a setinha sera injetada 
no elemento com a classe popover-arrow. 0 container 
geral e no elemento com a dasse .popover. 

viewport 

string ou 
object ou 
function 

{selector:’body) 
padding: 0} 

Confina o popover aos limites do seu elemento. 


Sao previstos ainda os metodos conforme as sintaxes mostradas a seguir. 


$('seletor'),popover( ''show" ) // Nostra o popover 

$('seletor').popover( "hide" ) // Esconde o popover 

$('seletor').popover( "toggle" ) // Alterna nostra/esconde o popover 
$('seletor').popover( "destroy") // Esconde e destroi o popover 

Os eventos nativos sao descritos a seguir. 


Evento 

Describe 

show.bs.popover 

Esse evento ocorre quando o usua rio dispara o popover, mas o conteudo 
dele ainda nao foi mostrado. 

shown.bs. popover 

Esse evento ocorre quando o conteudo do popover e mostrado. 

hide.bs. popover 

Esse evento ocorre imediatamente antes de o popover ser fechado. 

hidden.bs. popover 

Esse evento ocorre depois que o popover foi fechado. 

inserted.bs. popover 

Esse evento ocorre depois do evento show.bs.popover 
quando o template do popover for adicionado ao DOM. 


A cria^ao de popover com uso de JavaScript e identica a criaqao de tooltip com 
uso de JavaScript como mostrado no exemplo do item [5.2.6.2], Baseado naquele 
exemplo, sugerimos ao leitor, como exerdcio, criar uma pagina exemplo para 
popover com JavaScript. 


5.2.8 Alerta 

Alerta e uma funcionalidade que permite ao desenvolvedor aprcscntar ao usuario 
lima caixa com mensagem de alerta. 

A marcagao tipica para criar uma caixa de alerta consta de um div container ao 
qua! se atribui a classe alert. 
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Dentro desse div marca-se um elemento button do tipo button com a classe close, 
o par atributo/valor igual a data-dlsniss="alert" c a seguir a marcagao do titulo e 
conteudo da mensagem. 

Essa marcai^ao, conforme mostrado a seguir, cria uma caixa de alerta padrao ou 
de alerta geral, renderizada cm tons de amarelo. 

• HTML 

<div class="alert"> 

ebutton type="button" class=' [ close" data-disniss="alert">x</button> 

<h4>Alerta!</h4> 

<p>Voce ten certeza que deseja deletar o arquivo?</p> 

</'div> 

Para fazer funcionar o alerta o desenvolvedor precisa definir manualmente os me- 
todos JavaScript proprios do Bootstrap. Ao contrario dos componentes estudados 
anteriormente nao ha disparo de alerta com uso de atributos data-*. 

O metodo nativo para inicializar um alerta tern a sintaxe conforme mostrada a seguir. 

$('seletor').alert(} 

onde seletor e uma referenda ao elemento container do alerta. 

E previsto ainda o metodo conforme a sintaxe mostradas a seguir. 

$('seletor').alert("close”) // fecha a caixa de alerta 
Os dois eventos nativos sao descritos a seguir. 


Evento 

Descried 

close.bs.alert 

Esse evento ocorre imediatamente apos a chamada do 
metodo alert com a instancia dose. 

dosed, bs.alert 

Esse evento ocorre ao final do fechamento da caixa de alerta (apos terem sido 
eompletadas as transires CSS). 


Para mais informa^oes, uso e exemplos de caixas de alerta ver [4.14]. 


5.2.9 Botoes 

A estiliza^ao de botoes com uso de classes (CSS) foi estudada no capitulo 3 nos 
itens [3,5.12], [3.5.13], [3.5.1.4] e o agrupamento de botoes foi estudado no capitulo 4 
no item [43]. Neste item do capitulo 5 estudaremos a manipula^ao de botoes 
com uso de JavaScript. 
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Silo previstos tres metodos para manipula^ao de botoes conforme mostrados a 
scguir. 

$(.botaoN).button('toggle') // alterna o estado do botao - ativo/repouso 
$(.botaoN).button('reset') // retorna o botao ao estado repouso 
$( .botaoN).button( 'string') // altera o texto do botao 

onde .botaoN idcntifica o botao ao qual sera aplicado o metodo. 


Alerta O metodo $(' .botaoN),button('loading") esta em desuso e sera retirado na 
versao BS4. 


No exemplo a seguir mostraremos a aplica^ao destes tres metodos para manipu- 
la^ao de botoes. 

• HTML 

cbutton type="button" id="botaoToggle'' 

class="btn btn-default">Botao con button('toggle')</button> 

<button type= "button" class="btn btn-default">Botao sen button( 'toggle')</buttonx/div> 
<div id="botaoReset"> 

cbutton type= "button" class="btn btn-default">Padrao</button> 
cbutton type="button" class="btn btn-prirtary ">Prinario</button> 
cbutton type="button" class="btn btn-success">Sucesso</button> 

<button type= "button" class="btn b tn- 1 nfo 1 ' >In fornagaoc/button> 

^button type= "button" class="btn btn-warning''>Atengao</button> 
cbutton type="button" class="btn btn-danger”>Perigo</button> 

</div> 

cbutton type= "button" id="botaoString" class="btn btn-default 11 
data-conplete-text-'Carreganento terninou!>Padrao</button> 

• JavaScript 

cscript type="text/javascri.pt"> 

// Ao cltcar altera a aparencia do botao para clicado 
$( "#botaoToggle").click(function(){ 

$(this).button(' toggle'); 

)) 

/* Ao clicar o texto do botao nuda para "loading" 
ao terninar o carreganento o texto volta ao valor inicial */ 

$("ftbotaoReset .btn").click(function(){ 
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$(this).button('loading').delay(1000).queue{function(){ 

$(this).buttom(' reset 1 ); 

$(this).dequeue(); 

}>; 

}); 

/* Ao clicar o texto do botao nuda para "loading" ao termnar o carreganento o texto 
nuda para o valor do atributo data-complete-text (ver narcagao HTML) */ 

$("flbotaoString").click(function(){ 

$(this).button('loading’ ).delay(1000),queue{function() { 

$( this), button (’ conplete 1 ); 

$(this).dequeue(); 

}>; 

}); 

</script> 

</body> 

</htnl> 

[.../c5/botoes-ja vascript.htm I] 

Ao visualizar este exemplo clique os botoes para ver os metodos JavaScript em agao. 


5.2.10 Collapse 

Collapse e uma funcionalidade destinada a criar o efeito revelar/esconder para 
apresentagao de conteudos. 

Existent duas maneiras de se projetar este efeito: diretamente com uso do par 
atributo/valor data-toggle="collapse" ou codificando com uso de metodos JavaScript 
previstos no Boostrap. Vercmos a seguir essas duas maneiras. 

5.2.10.1 Collapse com uso de data-toggle 

Para criar este efeito usa-se uma marcagao padrao com classes nativas do Bootstrap 
e a declaragao do atributo data-toggle="collapse’' para um elemento a ou button que 
devera marcar o link que ira revelar/esconder os conteudos. 

Se for usado o elemento a, seu atributo href devera ter valor igual ao valor do id 
do container dos conteudos a revelar/esconder. 

Se for usado o elemento button ele devera receber o atributo data-target com valor 
igual ao valor do id do container dos conteudos a revelar/esconder. 
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Os mecanismos internos do Bootstrap identificam os atributos data-* e as classes 
dehnidas na marcagao e acionam os codigos JavaScript necessarios para fazcr 
funcionar o efeito. O desenvolvedor nao precisa criar codigo JavaScript, eles sao 
criados automaticaraente pelo Bootstrap. 

No exemplo a seguir raostraremos a criagao do efeito revelar/esconder simples 
acionado por um link ou por um botao e o uso deste efeito para criar uni menu 
acordeao com tres links marcados com elementos a e ao qual atribuimos a 
classe="btn" fazendo com que os links fossem estilizados como um botao. 

A marcagao HTML para o exemplo e mostrada e comentada a seguir. 

• HTML 

// Exenplo de collapse simples 

1. <a data-toggle="colapse" h ref="#c olapseU n ">M aca</a > 

2. <button class="btn btn-primary” type="button" data-toggle="collapse" 

data-target= "#colapseUfi" aria-expanded="false">Maga</button> 

3. <div id="colapseUFi" class=' , collapse"> 

4. <div class= n well"> 

5. <pximg src="collapse-rtaca.jpg" alt="rca$:a" class= r 'pLlTleft">A maga...</p> 

6. <small>Fonte: Hikipedia</small> 

7. </div> <!-- /. well --> 

8. </div> <!-- /ScolapseUn --> 

II Exenplo de collapse para criar menu acordeao 

13. <div class="panel-group" id="accordion" role="tablist" aria-nultiselectable= "true”> 

14. <div class=’’panel panel-defaults 

15. <div class="panel-heading" role=’'tab 11 id= ,l headingLaranja ,l > 

16. <h4 class="panel-title"> 

17. <a class="btn btn-info" role="button" data-toggle="collapse" 
data-parent="#accordion" href-'ttcoliapseLaranja" aria-expanded= "true” 

aria-controls= M collapseLaranj3">Laranja</a> 

18. </h4> 

19. </'div> 

2C. <div id="collapseLaranja" class=’'panel-collapse collapse in" role="tabpanel’' 
aria-labelledby="headingLaranja"> 

21. <div class="panel-body"> 

22. <pxing src="collapse-laranja.jpg" alt="laranja" class="pull-left">A laranja 
e ...</pxsnall>Fonte: Wikipedia</snall> 

23. </div> 

24. </div> 
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25. </div> <!-- /.panel --> 

26. <div class=’’panel panel-defaults <!-- painel 2 --></div> <!-- /.panel 

27. <div class= "panel panel-defaults <!-- painel3 --></di.v> <!-- /.panel --> 

28. </div> <!-- /.panel-group --> 

[.../c5/collapse-data-toggle.html] 


Alerta: O funcionamento do componente collapse requer a inclusao do plugins 
collapse e transition. 


Codigo comentado: 


Linha(s) Descrigao 


Lin has 1 a 7 

Linha 1 


Linha 2 


Linhas 3 
Linhas 4 


Linhas 5 e 6 
Linhas 7 e 8 
Linhas 13 a 28 
Linha 13 


Linhas 14 a 25 


Linha 15 a 19 


Linha 16 a 18 


Marcacao de um painel revelar/esconder simples. 

Link para acionar o efeito revela/esconde. O par atributo/valor data- 
toggle= "collapse" e obrigatorio e o atributo href deve apontar para o id 
do container do conteudo a revelar/esconder (linha 3). 

Botao para acionar o efeito revelar/esconder. O par atributo/valor 
data-target="colapseJm" e obrigatorio e deve ser igual ao valor do id do 
container do conteudo a revelar/esconder (ver linha 3). 

Container geral para o conteudo a revelar/esconder. E obrigatorio 
definir, para esse container, a classe com valor collapse. 

Container que usa a classe well prevista no Bootstrap com a finalidade 
de criar e estilizar uma caixa com bordas arredondadas e cor de fundo 
(ver componente Well era [4.20]). 

Conteudo a revelar/esconder. 

Tags de fechamento dos containers well e geral. 

Marcagao de tres paineis revelar/esconder para criar o menu acordeao. 

Container geral do menu que devera, obrigatoriamente, receber a classe 
panel-group e um id de livre escolha, O valor do id sera igual ao valor do 
atributo data-parent marcado em cada um dos links (ou botoes) que 
acionam o efeito revelar/esconder. (ver linha 17) 

Container geral do primeiro painel que compoe o menu. Nas linhas 
26 e 27 encontram-se os outros dois paineis cuja marcacao HTML foi 
omitida por ser semelhante a deste primeiro painel. 

Container geral do link ou botao destinado a revelar/esconder o con¬ 
teudo de cada painel. Notar que o valor do atributo id deste container 
devera ser igual ao valor do atributo aria-labelledby do container geral 
do cojnteudo a revelar/esconder (ver linha 20). 

Elemento h4 container do link para revelar/esconder. 
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Linha(s) Descrpo (cont.) 

Linha 17 Container do link que aciona o revelar/esconder. O atributo href deste 

link aponta para o id do container geral do conteiido a revelar/esconder 
(ver linha 20). 

Linhas 20 a 24 Container geral do conteudo a revelar/esconder. A classe in neste con¬ 
tainer destina-se a fazer com que este conteudo seja apresentado a vista 
(revelado ou aberto) quando a pagina for carregada. 

Linhas 21 a 23 Container corpo dos conteiidos a revelar/esconder. Notar que neste 
container pode-se inserir qualquer tipo da marca^ao HTMLe no nosso 
exemplo mostramos uma imagem em cada painel, alem de textos. 


5.2.10.2 Collapse com JavaScript nativo 

Na verdade, nas op^ocs com uso dc data -* e com uso dc JavaScript o mecanismo do 
plugin usa JavaScript. A diferen^a e que para a primeira opgao sao os mecanismos 
internos do Bootstrap que identificam os atributos da marcagao HTML e acionam 
os codigos JavaScript necessarios para fazer funcionar o efeito revelar/esconder e 
na op$ao com JavaScript nativo o desenvolvedor precisa definir manualmente os 
metodos JavaScript proprios do Bootstrap para acionar o accordion. 

O metodo nativo para inicializar o efeito tem a sintaxe conforme mostrada a seguir. 

$( 1 seletor 1 ).collapse() 

onde seletor e uma referenda ao elcmento container do conteudo a revelar/es¬ 
conder. 

As op^oes para esse metodo sao: 


Nome 

Tipo 

Default 

Descriqio 

parent 

selector 

false 

Define o elemento-pai para o efeito revelar/esconder. 

toggle 

boleano 

true 

Altera a visibilidade do conteudo quando acionado. 


Sao previstos ainda os metodos conforme as sintaxes mostradas a seguir. 

$('seletor').collapse( ''show") // revela o conteiido 

$('seletor').collapse( "hide") // esconde o conteudo 

$('seletor').collapse("toggle") // alterna revelar/esconder o conteudo 
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Os quatro eventos nativos sao descritos a seguir. 


Evento 

Descrifio 

show + bs. collapse 

Esse evento ocorre mediatamente apos a thamada do metodo collapse com a instancia 
show. 

shown t bs* collapse 

Esse evento ocorre aofina! da abertura de um conteudo (apos terem sido completadas as 
transires CSS). 

hide,bs .collapse 

Esse evento ocorre imediatamente apos a chamada do metodo hide(). 

hedden.bs .collapse 

Esse evento ocorre ao finai do fechamento de um conteudo (apos terem sido completadas 
as transires CSS). 


A obten^ao do efeito revelar/esconder com uso de JavaScript e identica a cria^ao 
de tooltip com uso de JavaScript como mostrado no exemplo do item [52.62]. 
Baseado naquele exemplo, sugerimos ao leitor, como exercicio, criar uma pagina 
exemplo para o efeiot revelar/esconder com JavaScript, 


5.2.11 Carousel 

Carousel e uma funcionalidade que se destina a criar um slideshow acionado 
com uso de um efeito semelhante a um carrossel. 

Existem duas maneiras de se projetar o efeito carrossel: diretamente com uso 
de marca^ao padrao e de atributos classe e data-ride ou codificando com uso de 
metodos JavaScript previstos no Bootstrap. Veremos a seguir essas duas maneiras. 

Todas as imagens a serem mostradas no slideshow carrossel devem ter as mesmas 
dimensoes (largura x altura). A largura devera ser igual ou maior a maior largura 
assumida pelo container do carrossel e a altura e de livre escolha do autor, isto e, 
o Bootstrap nao estabelece uma razao de aspecto para as imagens. 

Por exemplo: se o carrossel foi projetado para ocupar toda a largura de uma linha 
(div.row) as imagens deverao ter uma largura total igual (ou maior) do que 1170px 
pois esta e a maior largura de uma linha para resoluijoes acima de 1200px que e o 
maior breakpoint do Bootstrap. Se o carrossel foi projetado para ocupar a metade 
de uma linha a largura das imagens devera ser igual a largura correspondente 
a uniao de seis colunas adjacentes (aproximadamente 600px), pois uma linha 
content 12 colunas. 
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5.2.11.1 Carousel com usode data-ride 

Para criar o efeito carrossel cm urn slideshow usa-se uma marcaqao padrao com 
classes nativas do Bootstrap e a declara^ao do atributoo data-ride e de classes. 

Os mecanismos internos do Bootstrap identificam os atributos e as classes defini- 
das na marca^ao e acionam os cod igos JavaScript necessarios para fazer funcionar 
o carrossel. O desenvolvedor nao precisa criar codigo JavaScript, eles sao criados 
automaticamente pelo Bootstrap. 

No exemplo a seguir mostraremos a cria^ao de um slideshow com uso do plugin 
Carousel. 

• HTML 

1. <div id-'pieuCarrossel" class="carousel slide" d3t3-ride="c3rousel"> 

2. <ol class="carousel-indicators"> <!-- "Bolinhas" da navegaqao pelos slides 

3. <li data- target="#neuCarrossel" data-slide-to-'O" class= "active "></li> 

4. <li data-target="#neuC3rrossel" data-slide-to="l"x/li> 

5. <!-- nais tres indicadores --> 

6. <li data-target="flneuCarrossel" data- slide-to= ,l 5’ , x/li> 

7. </ol> 

8. <div class="carousel-inner" role="listbox"> <!-- Container dcs slides --> 

9. <div class="itepi active "> 

10. <ing src="d.jpg" alt=""> 

11. <div class="carousel-caption"> 

12. <h4>Slide l</h4> 

13. <p>Loren ipsun dolor sit anet, consectetuer adipiscing elit.</p> 

14. </div> 

14. </div> 

15. <div class="itepi"> 

16. <ing src="c2.jpg" alt=""> 

17. <div class="carousel-caption"> 

18. <h4>Legenda 2</h4> 

19. <p>Curabitur hendrerit erat ut augue. Cras gravida.</p> 

20. <./div> 

21. </div> 

22. <div class="iten"> 

23. <!-- seguen nais quatro slides --> 

22. </div> 

23. </div> <!-- /.carousel-inner --> 
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24. <a class-'left carousel-control" href="#neuCarrossel" data-slide= "prey" role="button r ’> 
<span class="glyphicon glyphicon-chevron-left" ari.a-hvdden="true"></spar> 

<span class="sr-only">Anterior</spanx/a> 

25. <a class= "right carousel-control" href="#neuCarrossel" data-slide^'next 1 ' 

role="button" > 

<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 

<span class="sr-only">Prdxino</span> 

</a> 

26. </div> <!-- /#neuCarrossel --> 


[.../c5/carrossel-data-ride.html] 

Codigo comentado: 


Linha(s) Descri^ao 


Linhas 1 e 26 


Linhas 2 a 7 


Linhas 8 e 23 
Linhas 9 e 14 


Linhas 11 e 14 
Linhas 24 e 25 


Container geral do carrossel. Devera receber a ciasse de estiliza^ao 
prevista no Bootstrap denominada carousel. Adicionalmente declare 
a ciasse slide para permitir a transiqao dos slides com o efeito de mo- 
vimentar lateralmente. Se essa ciasse nao for definida a transicao sera 
abrupta. Definir tambem o atributo id com valor de livre escolha do 
autor. Esse valor servira de referenda para definir o valor do atributo 
data-target con forme mostrado nas linhas 3 a 6 e tambem sera o valor 
do atributo target dos links ‘Anterior” e “Proximo” (ver linhas 24 e 25). 
No nosso exemplo escolhemos o valor id^'neuCarrossel" para o container 
geral do carrossel (ver linha 1). 

Lista destinada a criar os indicadores de imagem ativa (as bolinhas 
de navegagao pelas imagens). O quantidade de itens U nesta lista e 
igual a quantidade de slides. Na marcaqao desta lista definir, tal como 
mostrado na marcagao, os atributos class, data-target e data-slide-to. 
O valor do atributo data-slide-to devera ser uma sequencia numerica 
iniciando em zero. 

Container interno para o carrossel. Definir a ciasse carousel-inner. 
Container para cada imagem e sua legenda. Definir a ciasse iten e a 
ciasse active para determinar a primeira imagem a aparecer no car rossel 
(imagem de capa). 

Container geral para a legenda da imagem. Definir, para esse container, 
a ciasse carousel-caption. 

Cria as setas para manualmente acionar o carrossel para a esquerda 
ou direita. 


Na marcaqao HTML que demonstra este exemplo uma folha de estilos incorpo- 
rada com apenas duas regras de estilos como mostrada a seguir foi comentada. 
Estas regras de estilos criam um efeito na legenda dos slides. Para visualizar o 
efeito, descomente as regras. 
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• CSS 

<style rel="stylesheet"> 
h2 {font-size:20px;} 
.carousel-caption { 
bottom: G; 
right: 0; 
left: 0; 

padding: 0 5px 30px 5px; 
background: rgbaCGAO,.6); 

} 

.carousel-indicators { bottom: 0; } 
</style> 


5.2.11.2 Carousel com JavaScript nativo 

Na verdadc, nas op^oes com uso de marcarjao padrao e com uso de JavaScript o 
mecanismo do plugin usa JavaScript. A diferen^a e que para a priincira op^ao sao 
os mecanismos inter nos do Bootstrap que identificam os atributos da marca^ao 
HTML e acionam os codigos JavaScript necessarios para fazer funcionar o carrossel 
e na op^ao com JavaScript nativo o desenvolvedor precisa definir manual men te 
os metodos JavaScript proprios do Bootstrap para acionar o carrossel. 

O mctodo nativo para inicializar um carrossel tem a sintaxe conforme mostrada 
a seguir. 

$( 1 seletor 1 ).carousel() 

onde seletor e uma referenda ao elemento container do carrossel. 


As op^oes para esse metodo sao: 


Nome 

Tipo 

Default 

Describe 

interval 

numero 

5000 

Tempo de espera em milissegundos para haver a trans^ao 
automatica para a prbxima imagem. Definir o valor false para 
essa opcao interrompe a transi^ao automatica. 

pause 

string 

'hover' 

A(ao do usuario necessaria para pausaro slideshow. A agao 
padrao ('hover') e colocar o mouse sobre a imagem para pausar e 
retirar o mouse para continuar. 

wrap 

boleano 

'true' 

Define se a movimenta^ao dos slides sera infinite ou apenas um 
cidoeparar. 

keybord 

boleano 

'true 1 

Define se os comandos avan^ar/recuardos slides serao ou nao 
controlados peias setas do tedado. 
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Silo previstos ainda os metodos conforme as sintaxes mostradas a seguir. 

$('seletor').carousel( "cycle")// movimenta os slides da esquerda para a direita 
$('seletor').carousel( "pause")// pausa o novimento dos slides 
$('seletor').carousel(number) // movimenta os slides para o slide number (04,2,3 etc.) 
$('seletor').carousel("prev") // movimenta para o slide anterior ao atual 
$('seletor').carousel("next") // movimenta para o slide posterior ao atual 

Os dois eventos narivos sao descritos a seguir. 


Evento 

Describe 

slide.bs.carousel 

Esse evento ocorre no inicio da movimenta^ao dos slides. 

slid,bsxarousel 

Esse evento ocorre ao final da transijao do slide. 


Nestes dois eventos estao disponiveis as propriedades direction e event. related Target 
que retornam a dire^ao de raovimenta^ao (left ou right) e o cleraento, respecti- 
vamente, do slide que se tornou ativo. 

No exeraplo a seguir usamos a mesma marca^ao do exemplo mostrado no item 
anterior [5.2.11.1 ], retirando apenas o atributo data-ride da marca^ao HTMLe cria- 
mos comandos para o slideshow usando algumas das funcionalidades JavaScript 
aqui estudadas. O script constants do exemplo e tnostrado a seguir. 

• JavaScript 

<script type="text/javascript's 
$( 1 ttmeuCarrossel 1 ).carousel( 

{ 

interval: 500, 
wrap: false, 
keyboard: false 

)>; 

$('#meuCarrossel').on('slide.bs.carousel', function () { 
console.log('Inicio da movimentagao do slide'); 

)) 

$( [ #meuCarrossel').on('slid.bs.carousel', function () { 
console.log( r Fim da novimenta^ao do slide'); 

)); 

</script* 

[.../c5/carrossel-javascript,html] 
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Sugerimos ao lei tor, corno exerdcio, criar uma copia do arquivo deste exemplo e 
explorar as demais funcionalidades JavaScript para o plugin carousel escrevendo 
seus proprios scripts. 


5.2.12 Affix 

Affix e uma funcionalidade destinada a manter um container fixo em uma posigao 
na pagina, ou seja, se o usuario aciona a barra de rolagem da pagina o container 
nao se movimenta. 

Existem duas maneiras de se projetar o efeito affix: diretamente com uso de 
marcagao padrao e de atributos data-spy ou codificando com uso de metodos 
JavaScript previstos no Bootstrap. Veremos a seguir essas duas maneiras. 

5.2.12.1 Affix com uso de data-spy 

Para criar o efeito affix usa-se uma marcagao padrao com declaragao do atributos 
data-spy. 

Os mecanismos internes do Bootstrap identificam os atributos definidos na mar¬ 
cagao e acionam os codigos JavaScript necessarios para manter o container fixo 
na pagina. O desenvolvedor nao precisa criar codigo JavaScript, eies sao criados 
automaticarnente pelo Bootstrap. 

No exemplo a seguir rnostraremos a criagao de um menu fixo na tela com uso 
da funcionalidade affix. 

• HTML 

<ul class="nav nav-tabs nav-stacked" data- spy=" affix" data-offset-top="Z65"> 

<ltxa href="#tp">Topo</a></li> 

<ltxa href= , '#un">Link l</ax/li> 

<Uxa href= , '#dois">Link 2</ax/li> 

<lixa href=''#tres">Link 3</ax/li> 

<lixa href="#quatro">Link 4</ax/U> 

<lixa href="#cinco">li.nk 5</ax/li> 

</ul> 

<h2 id= , 'un">L-Lnk l</h2> 

<p>Lorea Lpsupi... </p> 

<h2 id= ,l dois">Link 2</h2> 

<p>Pellentesque sapien...</p> 
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<h2 id="tres">Link 3</h2> 

<p>Nulla facilisi...</p> 

<h2 id="quatro''>Link 4</h2> 

<p>Curabltur hendrerlt...</p> 

<h2 id="cinco , '>Link S</h2> 

<p>Cufi sociis natoque.. .</p> 

[,../c5/affix-data-spy.html] 

Definimos o atributo data-spy="af fix" para o container do elemento a manter fixo 
na pagina (no nosso exemplo o menu) e o atributo data-offset-top que define a 
quantidade de pixels a rolar a partir da qual o container sera mantido fixo na 
sua posi^ao original. 

Pode-se usar qualquer tipo de dispositivo de navega^ao, previsto ou nao no Boots¬ 
trap, contudo essa funcionalidade nao tern uma estiliza^ao padrao nativa. O autor 
devera criar uma folha de estilos conforme suas necessidades. Neste exemplo a 
folha de estilos esta incorporada a marca^ao da pagina. 

Consulte o exemplo, verifique o funcionamento e depois comente a folha de 
estilos voltando a verificar o funcionamento. 

5.2.12.2 Affix com JavaScript nativo 

Na verdade, nas opijdes com uso de marca^ao padrao e com uso de JavaScript o 
mecanismo do plugin usa JavaScript. A diferenga e que para a primeira op^ao sao 
os mecanismos internos do Bootstrap que identificam os atributos da marca^ao 
HTML e acionam os codigos JavaScript necessarios para tornar o container fixo 
e na op^ao com JavaScript nativo o desenvolvedor precisa definir manualmente 
os metodos JavaScript proprios do Bootstrap para fixar o container. 

O metodo nativo para inicializar ura affix tern a sintaxe conforme mostrada a 
seguir. 

$( seletor') ,affsx() 

onde seletor e uma referenda ao elemento container a manter fixo. 


A duas op^oes para esse metodo e: 


Nome 

Tipo 

Default 

Descri^ao 

offset 

mimero ou funqio ou 
objeto 

10 

Define a posi^ao, em numero de pixels, do container 
{no rosso exemplo um menu) fixo em rela^ao ao topo 
da tela. Ascoordenadas sao top, right, bottom e left. 

Por exemplo: offset: {top:20}. 
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Nome 

Tipo 

Default 

Descri^ao 

target 

seletorou noon 
elemento jQuery 

0 objeto window 

Define o elemento em relate ao qual o container (no 
nosso exemplo um menu) sera fixo. 


No exemplo a seguir usamos a mesma marca^ao do exemplo mostrado no item 
anterior [5.2,12.1], retirando apenas os atributos data-spy e data-offset da marca^ao 
HTML e criamos comandos para o acionar o affix usando algumas das funcio- 
nalidades JavaScript aqui estudadas.Aretirada dos atributos da marcatjao HTML 
e o script constantc do exemplo e mostrado a seguir, 

• HTML 

<ul class="nav nav-tabs nav-stacked 1 ' data-spy="affix" data-offset-top="265"> 

Nessa op<jao nao se usam os atributos data-*. 

* JavaScript 

<scri.pt type="text/javascript"> 

var offset = $( 1 .nav 1 ).position().top; 

$( '.nav 1 ).affix({ 
offset: offset 

}>; 

</script> 

[.../c5/affix-javascript.html] 

Notar que com uso de JavaScript podemos inspecionar dinamicamente as coorde- 
nadas do container (no nosso exemplo um menu), com uso do metodo positionQ 
da jQuery, e defini-Ia com uso da op^ao offset. 
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CAPITULO 6 

Criando um layout com Bootstrap 


Neste capitulo, irernos aplicar as funcionaiidades do framework para criar um 
layout a partir da imagem fornecida pelo designer do site. 


6.1 Introdugao 

E quase ccrto que as regras-padrao de estiliza^ao previstas na folha de estilo do 
Bootstrap nao sejam adequadas ao design do site que voce pretende desenvolver. 
Existem tres op^ocs basicas de personalizar a folha de estilo do Bootstrap para 
atender as necessidades especificas de um projeto. 

A primeira op<^ao e fazer o download personalizado no site do Bootstrap em 
http://getbootstrap.com, a segunda e alterando as variaveis LESS de acordo com 
suas necessidades e a terceira opgao e fazer o download completo do framework 
Bootstrap (foi a opgao que adotamos para criar os exemplos deste livro) e proje- 
tar uma folha de estilo personalizada para as necessidades do projeto, confer me 
mencionamos no item 13, quando dissemos que era sugerido que essa folha de 
estilo fosse nomeada como cwstom.css. Tal folha devera ser vinculada ao documento 
depois da folha de estilos do Bootstrap, con forme mostrado a seguir. 


<title>Tltulo da paginac/titles 

<link rel="stylesheet" href="css/bootatrap.nin.css"> 

<Unk rel=" stylesheet" href= l 'css/custon.css , ’> 


Afinalidade desta folha de estilo e a de sobrescrever os estilos-padrao do Bootstrap, 
adaptando-os as necessidades do projeto. Veja o exemplo a seguir. 
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Viraos no item 3.1 que a marca^ao HTML para criar um botao e a mostrada a seguir. 


<button type=”buttor” class="btn btn-default's Botao basico</button> 

Esta marcagao cria um botao basico que e renderizado com cor de fundo branca, 
borda cinza arredondada e texto na cor preta. No estado hover a cor de fundo 
do botao e cinza. Abrindo a folha de estilos bootstmp.css localizada na pasta css 
do Bootstrap era editor de texto e nela iocalizando os seletores .btn e .btn-default 
encontramos as declara^oes CSS que criarn (estilizam) o botao basico. No trecho 
de codigo a seguir, retirado daquela folha de estilo, mostramos as regras CSS para 
aqueles seletores. 

.btn { 

display: inline-block; 
padding: 6px 12px; 
font-size: 14px; 
background-inage: none; 
border: lpx solid transparent; 
border-radius: 4px; 

/* nais declara^oes CSS */ 

} 

.btn-default { 
color: #333; 
background-color: #fff; 
border-color: #ccc; 

} 

Conforme estudado neste livro, sabemos que existem varias classe nativas desti- 
nadas a estilizar os botoes em diferentes cores e diinensoes. 

Suponha que no seu projeto os botoes basicos foram definidos pelo designer com 
a cor de fundo preta (black), a cor do texto verde (lime) e borda na cor vermelha 
(red) com cantos vivos. 

Neste caso, para personalizar os botoes, basta que voce declare, no arquivo custom, 
css , regras CSS para atender aqucla estiliza<^ao, conforme mostrado a seguir. 

.btn-defa.u1t { 

color: line; 

background-color: black; 
border-color:red; 
border-radius:0; 

} 
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Assim, voce criou urn conflito de regras CSS contidas em dois arquivos separa- 
dos servidos a mesma pagina. Resolve-se conflito de regras CSS aplicando-sc os 
crirerios da especificidade e do efeito cascata respectivamente, ou seja, vence a 
regra mais especifica, e se houver erapate, como e o caso do nosso exemplo, vence 
o efeito cascata. 

Como lincamos a pagina o arquivo app.css depois do arquivo bootstrap.min.css, a 
regra contida naquele arquivo e a vencedora e o botao basico ter a uma estilizagio 
personal izada. 

Consulte o arquivo [.../c6/botao-basico-personalizado.html] para verificar essa per- 
sonaliza^ao do botao basico. 

Neste capitulo, iremos criar um layout personalizando com uso de uma folha de 
estilos do tipo custom.css; contudo, para facilitar o estudo, a folha de estilo sera 
incorporada na se$ao head da pagina e nao lincada, como deve ser em um caso real. 

Uma ferramenta indispensavel para criagao de uma folha de estilos personalizada 
e o console do navegador, que podera ser instalado como complemento, como 
e o caso do Firebug, ou ser nativo do navegador, como e o caso da inaioria dos 
navegadores modernos. Nao e do escopo deste livro ensinar o uso de consoles de 
navegador, mas o leitor necessariamente devera saber usar pelo menos os paineis 
de inspe^ao e edi^ao do HTML e das CSS integrantes do console. 


Dica: O Zeno Rocha criou videos no YouTube que ensinam de forma bem didatica 
como usar o console do navegador. Assista os videos ein http://kwz.me/JR. 


O console do navegador mostra ao autor quais sao as regras CSS constantes da 
folha de estilo do Bootstrap aplicadas em determinado elemcnto da marca^ao 
HTML e consequcntemente qual seletor usar na personal iza^ao. 


6.2 Layout iMasters 

Para ilustrar este capitulo, usarcmos parte do layout da Home Page do iMasters 
(i http://kwz.me/vZ ) com o aspecto que ela apresentava ha um tempo atras e que 
pode ser visualizada na figura 6.1. 

Note na figura que a largura maxima de alguns conteudos da pagina e fixa (940px) 
e que a cor de fundo de alguinas barras do layout ocupam 100% da janela do 
navegador. 
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Figura 6.1 - Home page Masters (parte). 

Consideramos para o proposito dcste capitulo interromper o layout no final da 
barra superior das noticias como mostrado na figura. Trata-se apenas do inicio 
do layout, mas apresenta uma configura^ao com pa five 1 e suficiente para cumprir 
os objetivos dcste capitulo. Fica como sugestao ao leitor, a titulo de exercicio e 
fixa^ao dos seus estudos, criar as partes do layout abaixo da barra de noticias. 

Todas as imagens do layout estao disponiveis na pasta imagens que se encontra 
dentro da pasta imasters no diretorio c6 na pasta do download dos arquivos de 
exemplos deste livro. 

Antes de prosseguir, consulte o arquivo [... !c6/itnasters/imasters.htmlj e visualize a 
home page completa do site do iMasters, da qual foi extraida a imagem mostrada 
na figura 6.1 e que servira de base para as tecnicas estudadas neste capitulo. 

Confer me estudamos no item [3.1], o Bootstrap preve urn sistema de grid para 
constru^ao de layout que por padrao se estende ate uma largura maxima igual a 
1170px em larguras de viewport maiores do que 1200px. O espa^amento enrre cada 
coluna e obtido com a defini^ao de um padding lateral (a esquerda e a direita) igual a 
15px, resultando em um espa^amento cntre colunas igual a 3Gpx. Assim, somados 
o padding lateral esquerdo da primeira coluna e o padding lateral direito da ultima 
coluna, a largura maxima para o conteudo do layout e de 1170px - 30px = 1140px. 
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Afigura 6.2 apresenta um esquema mostrando as dimcnsoes horizontais do grid- 
-padrao, conforme descrito. 
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Figura 6.2 - Esquema do grid-padrdo. 

E facil personalizar a largura de um layout para diferentes breakpoints, pois, 
conforme estudamos no item 3.1.1 utna aplicagao desenvolvida com Bootstrap 
devera estar contida em um elemento container geral que rccebe a classe de 
no me container. E esse container que define a largura maxima do layout para os 
diferentes breakpoints. 

Inspecionando a folha de estilos do Bootstrap, encontramos as seguintes regras 
CSS para o seletor de classe .container. 

@nedia (nin-width: 768px) { 

.container { 
width: 750px; 

} 

} 

Unedia (min-width: 992px) { 

.container { 
width: 970px; 

} 

} 

@media (nin-width: 1200px) { 

.container { 
width: 1170px; 

} 

1 

Entao, para definir uma largura de contetido maxima para o layout igual a 940px 
(largura maxima do layout do iMasters), basta criar a seguinte regras CSS na folha 
de estilos personalizada da nossa aplicagao. 
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Smedia (min-width: 1200px) { 

.container { 

width: 970px; /* 970px - 30px = 940px */ 

} 

} 


Alerta: Em nosso exemplo, nao iremos alterar a largura maxima do layout para 
940px como e a largura do site do iMasters, pois nao existe qualquer prej uizo 
em se adotar a largura maxima padrao do Bootstrap que e de 1130px. 


For razoes didaticas, vamos mostrar a criagao do layout por etapas, conforme 
descritas nos itens que sc seguem. 


6.2.1 Primeira etapa: navegagao superior 

O template para o desenvolvimento do layout e conforme estudamos no item [ 1.4], 
contudo por tratar-se de personalizagao nao usaremos o arquivo bootstrap-theme, css. 

No topo do layout existe uni mecanismo de navegagao constante de links para 
segdes do site, links para redes sociais em forma de icones e link para login e 
cadastro. Na parte superior deste mecanismo de navegagao existe uma barrinha 
superior decorativa com tres se^oes em cores difcrentes. Note que a cor de fundo 
da pagina e cinza-clara. 

A barrinha superior decorativa sera construida com uso de um eletnento div com 
a classe barrinha-superior ao qual sera aplicada uma cor de fundo constituida por 
um gradiente CSS, conforme os codigos mostrados a seguir. 

• HTML 

<body> 

<div class="container"> 

<div class="barrinha-superior"></div> 

Notar que nao ha necessidade de se criar uma linha (<div class="row ,l >...</div>) 
para insergao da barrinha superior, ela pode ser elemento-filho do container 
geral div.container. 
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• CSS 

body { background: #f5f5f5; } /* * cor de fun do da pagina */ 

.barrlnha-superior { 
height: 4px; 

background; #369caf; /* fallback para navegadores que nao suportan gradientes */ 
background-inage: linear-gradientf to right, #369caf 33.33%, Be37900 33,33%, 
#e37900 66.66%, #af2d22 66.66%, #af2d22 ); 

/* use a nesna declaragao con uso de prefixes proprietaries se for o caso */ 


Alerta: Notar que embora a barrlnha superior seja constituida por tres faixas 
sequenciais de cores solidas diferentes as funcionalidades dos gradientes CSS 
possibilitam a obter aquele efeito. 


Para criar o mecanismo de navega^ao superior, usaremos o componente do Boots¬ 
trap denominado barra de navega^ao basica estudada no item [4.7.1], e marcada 
conforme o codigo mostrado a seguir. 

• HTML 

<div class=”row”> 

<div class="col-nd-12"> 

<nav class="navbar navbar-default" id= ,, n3v-superlor"> 

<div class="navbar-header"> 

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
data-target="#barraSuperior"> 

<span class="sr-only’'>Toggle navigations/span> 

<span class="icon-bar"></span> 

<span class="icon-bar"></span> 

<span class- 1 icon-bar"></span> 

</button> 

<a class="navbar-brand hidden-Ig hidden-nd hidden-sn" href- 1 #" 
data-toggle="collapse” data-t3rget=’'8b3rraSuperior">Henu</a> 

</div> 

<div class="collapse navbar-collapse" id="barraSuperior”> 

<ul class="nav navbar-nav"> 

<lixa href="#"xing src="inagens/icon-navsup.png" alt="logotipo do site"x/ax/lv> 
<lixa href="ft">Portal</ax/li> 

<!-- nais sete itens --> 

</ul> 
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<ul class= [, nav navbar-nav navbar-right''> 

<lixa href-'#" title="facebook"xing src= "imagers/facebook.png" 
alt=' r facebook"x/ax/li> 

<!-- mats cinco itens --> 

<lixa href="fT>Faga Login / Cadastre-se</ax/li> 

</ul> 

</di«x! - - /.navbar-collapse --> 

</nav> 

</div> 

</'div> <1-- /.row --> 


Alerta: Notar que para o container geral da barra de navega^ao definimos o de 
nossa escolha (nao padrao do Bootstrap) id="nav-superior". Fizemos isso para 
diferenciar da outra barra de navega^ao que existe no layout, como veremos 
adiante. 


[.../cfi/imastersl.html] 

Nesta etapa, a barrinha de topo estara estilizada e a barra de navegagao sera 
renderizada com a estiliza^ao padrao do Bootstrap. 

Observe na figura 6.3 o resultado da primeira etapa. 
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Figura 6.3 - Primeira etapa da criaqao do layout. 

Consulte o arquivo desta etapa e visualize o resultado no navegador. Redimensione 
a janela do navegador e observe o comportamento do layout. 


6.2.2 Segunda etapa: personaliza^ao da barra de topo 

Ao termino da primeira etapa, construimos a barrinha colorida superior e a barra 
de navegagao estilizada segundo o padrao de estilos do Bootstrap. 

Nesta etapa, criaremos as regras de estilo personalizadas, conforme mostradas e 
comentadas a seguir. 

• CSS 

1. ffnav-superior { background:(ifff; } 
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2. ftnav-superior li a { padding :2px 4px; } 

3. #nav-superior li a:hover { color:#00f; } 

4. @i"iedia (niir-width: lpx) { 

5. .navbar { 

6. min-height:auto; 

7. margin:0; 

8. border:none; 

9 . } 

10. .navbar li a { color:#333; } 

11 . } 


[.../c6/imasters2.htmlj 

Codigo comentado: 


Linha Descrpo 


Linha 1 
Linha 2 


Linha 3 
Linha 4 


Linhas 5 a 10 


Linha 11 


Esta declarable sobrescreve a cor de fundo padrao (#181818) da barra 
de navegagao e a faz branca. 

Sobrescrevemos o padding padrao do Bootstrap para os elementos a da 
barra de navegagao que e maior do que aquele previsto para o nosso 
layout. 

Definimos a cor azul, prevista para o estado over dos links. 

Declarar (Jnedia <nin-width:lpx) tem o efeito de sobrescrever as regras de 
estilo padrao para todas as larguras de viewport. Se nao tivessemos 
langado mao deste artificio as regras CSS contidas nas linhas 5 a 11 va- 
leriam apenas para larguras de viewport menores que 768px(lembra-se 
do principio mobile-first do desenvolvimento das CSS do Bootstrap?). 

Examinando a folha de estilo do Bootstrap encontramos as regras 
CSS para estilizar as barras de navegagao. Ali estao as declaracoes 
para bordas cinzas e arredondadas, altura minima de 50px, margens 
coniorme mostrado na figura 63. As declaracoes CSS contidas nestas 
linhas estilizam a barra de navegagao superior de acordo com o layout 
do [Masters. 

Estiliza os links da barra de navegagao na cor preta. 


Observe na figura 6.4 o resultado da segunda etapa. 


I« Portal Rif urn TMasters F&rram^enlas Cursos online Agenda Reutsta Masters InterCon 


D Q G E3 E3 E3 Lci 9 |ri 1 Cadastre-se 


Figiira 64 - Segunda etapa da criaQao do layout. 

Consulte o arquivo desta etapa e visualize o resultado no navegador. Redimensione 
a janela do navegador e observe o comportamento do layout. 


Conheca os livros do Maujor: http://livrosdomaujor.com.br 




216 


Boostrap 3.3.5 


6.2.3 Terceira etapa: barra do logotipo e caixa de busca 

Ncsta erapa, iremos criar e personalizar a barra azul que content o logotipo e a 
caixa de busca do site. Para esta barra definimos um atriburo id com valor barral. 

A marca^ao HTML para esta barra e conforme mostrada a seguir. 


• HTML 

1. <div class="row"> 

2. <div class="colTg-12"> 

3. <div id=' r barr3l''> 

4. Ang src="imagens/branding .png" alt=”logo iMasters"> 

5. <span class= 1 'textoTogo’ l >+ de 11.000 artigos tecnicos publicados en 12 anos</span> 

6. <forrt class="navbar-forn navbar-right" role="search"> 

7. <div class="form-group"> 

8. cinput type="text" class= ,, forn-control" placeholder= "Busca"> 

9. </div> 

10. <button type='’subnit" class=’'btn btn- default ">QK</button> 

11. </'f om> 

12. </div> <!-- /ttbarral --> 

13. </div> 

14. </div> <!-- /.row --> 


Codigo comentado: 


Linha 

Linhas 1 e 14 
Linhas 2 e 13 
Linhas 3 e 12 

Linha 4 
Linha 5 


Linhas 6 a 11 


DescriqjQ 

Deninimos uma linha para container da barra. 

Criamos uma coluna dentro da linha container da barra. 

Definimos um container para o logo tipoeoformulario coma final idade 
de termos uma referenda unica para estilizagao. 

Insere a imagem do logotipo do iMasters. 

Marcacao do texto ao lado do logotipo. Inserimos o texto dentro do 
container span, texto-logo, pots iremos estiliza-lo de forma diferenciada, 
como veremos adiante. 

Marcamos o formulario de busca conforme estudado no item [4.7.3], 


• CSS 

body { background: #f5f5f5 url(imagens/bg-header.png) repeat-x; } 
Sbarral ( background: #64a7b7; padding: 20px; } 

.texto-logo { font-size: 120%; color} 

[.../c6/imasters3.html] 
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Essas tres regras CSS sao suficientes para estilizar a barra do logotipo e caixa de 
busca. Notar que para estender a cor de fundo da barra usamos uma imagem, 
com repeti^ao no eixo dos x, como fundo do elemenro body. 

Observe na figura 6.5 o resultado da terceira etapa. 

t) Partal Forum TMaslEFS FEcramentas Cursosonline Ac-enda Revisla iMasSers JnterCon 11 H Q Fffl El -aca Login i Cadastie-ae 


^ i Masters 


Figura 6.5 - Terceira etapa da criaqdo do layout. 

Consulte o arquivo desta etapa e visualize o resultado no navegador. Redimensione 
a janela do navegador e observe o comportamento do layout. 


6.2.4 Quarta etapa: mecanismo de navega<ao principal 

Nesta etapa, iremos criar e personalizar o mecanismo de navegagao principal 
do site. 

Para criar este mecanismo de navega^ao, usaremos o componente do Bootstrap 
denominado barra de navega^ao com link dropdown estudada no item [4.7.5], e 
marcada con forme o codigo mos trado a seguir. 

* HTML 

<div class=”rw"> 

<div class="col-lg-12”> 

<nav class="navbar ravbar-default”> 

<div class="navbar-header”> 

<button type="button" class="navbar-toggle collapsed" data-toggle=''collapse' 1 
data-target=''#barraPrincipal"> 

<span class=''sr-only">Toggle navigationc/spans 
<span class="ieon-bar"x/span> 

<spar class="icon-bar"x/span> 

<span class="icon-bar"x/span> 

</button> 

<a class="navbar-brand hidden-Ig hidden-nd hidden-sn" 

href=’ 1 #" data-toggle=''collapse’ 1 data-target="#barraPrincipal">Menu</a> 

</div> 

<div class="collapse navbar-collapse" id="barraPrincipal"> 
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<ul class="nav navbar-nav”> 

<U class="dropdown"> 

<a href="#" class="dropdown-toggle" data-toggle=’dropdown" role="button" 

aria -expartded= "false ">Design &8038; UX<span class= "caret "></spanx/a> 

<ul class="dropdown-menu" role="nenu"> 

<li><a href="#">User Experience</ax/li> 

<lixa href="#">Arquitetura de Inforrtacao</ax/U> 

<!-- nais iters --> 

</ul> 

</li> 

<1-- nais dropdown --> 

<lixa href="#">Mapa do site</ax/li> 

</ul> 

</divx!-- /.navbar-collapse --> 

</nav> 

</div> 

</div> <1-- /.row --> 

A marcagao HTML mosrrada e tipica para criagao de uma barra de navegagao 
com links etn menu dropdown como estudado no item [47.5], 

• CSS 

1. (fbarraPrincipal { nargin-botton:20px; background:#7bb3cl Important; } 

2. (fbarraPrincipal li a { 

3. font-size: 809*; 

4. text-transforn:uppercase; 

5. padding:5px; 

6. color 

7. } 

8. a:hover { text-decoration:none; } 

9. (fbarraPrincipal li ul li a { color:#333; } 

[.../c6/imasters4.html] 

Codigo comentado: 

Lin ha Descrigao 

Linha 1 Definimos uma marge m abaixo da barra de navegagao e a cor de fundo 

azul-clara para a barra de navegagao. 

Linha 2 a 7 Estilizamos os links da barra de navegagao. 

Linha 8 Define a cor de fundo azul-clara para a barra. 
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Linha Descrigao (cont.) 

Linha 9 Para os links do submenu, cujo fundo e branco, definimos uma cor 

escura parasobrescreveracorbranca definida para os links deabertura 
do submenu que estao em fundo azul. 

Observe na figura 6.6 o resultado da quarta etapa. 


Iti Portal Forum /‘M aalsrs- Ferramentas, Curses online Agenda Pevisla [Makers interCon 


i □ o eg E3 a Faga Login i Cadastre-se 




Figura 6.6 - Quarta etapa da criagao do layout. 

Consulte o arquivo desta etapa e visualize o resultado no navegador. Redimensione 
a janela do navegador e observe o comportaraento do layout. Ha inconsistencias 
que serao tratadas nas ctapas seguinres. 


6.2.5 Quinta etapa: destaques da semana 

Nesta etapa, iremos criar e personalizar os quatro blocos que promovern os artigos 
em destaque, publicados na semana, em diversas areas do site. 

Para alcangar os objetivos desta etapa, iremos usar uma linha do layout contendo 
quatro colunas em larguras de viewport maiores e dispostas em duas ou uma 
coluna em viewports menores. 

A marcagao HTML e mostrada a seguir. 

• HTML 

<section cl ass=”row destaques”> 

<div class="col-sni-3 col-xs-6"> 

<figurexa href="(T title-'Gerencie sites en HP e destaque-se no niercado ir > 

<ing s rc="imagen s/banner -pa na-anuncio s. jpg" class="ing-responsive" 
alt= r 'banner para anuncios"x/a> 

<figcaption class="bcl’'xa href="#" 

title="Cerencie sites en HP e destaque-se no nercado" class="ccl"> 

Gerencie sites en HP e destaque-se no nercado</a> 

</figcaption> 

</figure> 

</div> 

<div class="col-sn-3 col-xs-6"> 
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<!-- senelhante ao anterior --> 

</div> 

<div class="col-sn-3 col-xs-6"> 

<!-- senelhante ao anterior --> 

</div> 

<div class="col-sn-3 col-xs-6"> 

<!-- senelhante ao anterior --> 

</div> 

</div> 

</section> <!-- /.row --> 

No codigo anterior, mostramos a marcagao HTML completa somente para o 
primeiro bloco, abreviando-a para os tres seguintes, pois a marca^ao para eles e 
semelhante a do primeiro item, exceto as classes bcl e ccl que para cstes tres blo- 
cos sao: be 2 e cc2, bc3 e cc3 e bc4 e cc4 respecrivamente. Estas classes se destinam a 
estilizar cor de fundo e cor de textos para cad a urn dos blocos. 

Notar ainda a defini^ao de colunas em <div class="col-sn-3 col-xs-6' r > destinada a 
positional os quatro blocos em uma linha, duas linhas e quatro iinhas conforme 
a largura da viewport. 

• CSS 


1. .destaques ing { widthilOO'Ss; height: auto; } 

2. .destaques figeaption { 

3. font-size:130K; 

4. background 

5. ran-height:lOOpxj 

6. padding:10px 20px; 


7. } 

4. .bcl { border-bottom 

5. .ccl { display:block; 

6. . bcZ { border-bottom 

7. .cc2 { display:block; 

8. .bc3 { border-bottom 

9. .cc3 { display:block; 

10. .bc4 { border-bottom 

11. .cc4 { display:block; 


6px solid #el734a; } 
color: #el734a; } 

6px solid #8d9b31; } 
color: #8d9b31; } 

6px solid #447Sab; } 
color: #4476ab; } 

6px solid #9c6496; } 
color: #9c6496; } 


[.../c6/imasters5.html] 
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Linha Descrigao 

Linha 1 Por padrao as imagens inseridas na marcacao HTMLnao sao responsi- 

vas. Assim, declaramos a largura era 100% com a finalidade de taze-las 
responsivas. 

Linha 2 a 7 Regras para estilizar o container dos blocos. 

Linhas 4 a 11 Classes para estilizar as cores de fundo e dos textos era cada um dos 
quatro blocos. 

Observe na figura 6.7 o resultado da quinta etapa. 
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Figura 6.7 - Quinta etapa da criando do layout. 

Consulte o arquivo desta etapa e visualize o resultado no navegador. Redimensione 
a janela do navegador e observe o comportamento do layout. 


6.2.6 Sexta etapa: barra de noticias 

Nesta etapa, iremos criar e personalizar a barra de noticias com fundo na cor 
preta que se estende por toda a largura da viewport. Essa barra content quatro 
noticias com texto na cor branca, sendo que para cada uma das noticias ha um 
titulo em cor diferente. Sobre a margem inferior da barra ha um link em uma 
pequena caixa com o texto +noticias. 

Para alcanqar os objetivos desta etapa, a marcacao HTML escolhida foi aquela 
que cria uma linha com quatro colunas, cada uma contendo uma noticia. O link 
+noticias esta contido dentro da linha. 

A marcagao HTML para esta etapa e mostrada a seguir. 
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• HTML 

<div class=”container-fluid’> 

<section class="row noticias"> 

<div class="container"> 

<div class="col-spi-3"> 

<h3><span class="ccl">Desenyolvinento</span> / 16 horas atras</h3> 

<pxa href="#">Stack Overflow disponibiliza site en portugues</ax/p> 

</div> 

<div class="ccl-spi-3"> 

<h3xspan class="cc2”>Mercado</span> / 17 horas atras</h3> 

<pxa href="#”>Vendas de tablets aunentan 5Q,6!!« en 2013, nsas ha sinais de 
saturagao</ax/p> 

</div> 

<div class="col-sn-3"> 

<h3xspan class="cc3">Redes sociais</span> / 18 horas atras</h3> 

<pxa href="#">Facebook estreia botao "rebjeet" no leitor de noticias Paper</ax/p> 
</div> 

<div class="col-sn-3"> 

<h3xspan class="cc4">Tecnologi3</span> / 18 horas atras</h3> 

<pxa href=”#" >AMD anuncia prineira CPU baseada en ARM de 64 bits</ax/p> 

</div> 

<a href="#" class="nais-noticias">+ noticias</a> 

</div> <!-- /.container --> 

</section> <1-- /.row --> 

</’div> <1-- /.container-fluid --> 

• CSS 

1. .noticias { 

2. position:relative; 

3. background:#333; 

4. padding: 10px 0; 

5. nargin-top:20px; 

6 . } 

7. .noticias h3 { 

8. font-size :90 m; 

9 color: #999; 

10. text-transforn:uppercase; 

11 . } 
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12. .noticias a { 

13. display:block; 

14. font-size:15DK; 

15. color 

16. } 

17. .noticias a:hover { color:#ccc; } 

18. a:hover { text-decoration:none; } 

19. a.mais-noticias { 

20. width:160px;; 

21. font-size:100%; 

22. text-alignreenter; 

23. background:#666; 

24. position:absolute; 

25. left: 50%; 

26. bottom:-10px; 

27. margin-left:-80px; 

28. } 

29. @media screen and {max-width:1200px) { 

30. body { 

31. background-image:none; 

32. } 

33. } 

34. @media screen and (max-width:992px) { 

35. form[role="search"] { 

36. float monel important; 

37. } 

38. } 

[.../c6/imasters-fi nal.html] 

Codigo comentado: 

Linha Descrigao 

Linhas 1 a 6 Convent destacar a declaragao de posicionamento relativo para a linha 
container desta segao. essa declaragao visa a criar um contexto de po¬ 
sicionamento para o link +noricias (ver linhas 24 a 27). 

Linhas 7 a 28 Estilizagao geral auto explicativa. 

Linhas 29 a 38 Regras esperi ficas para breakpoins com a finalidade de evitar pequenas 
quebras no layout. Retire estas regras e observe o eieito ao redimensionar 
a janela do navegador. 
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Observe na figura 6.8 o resultado da sexta etapa. 
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Figura 6.8 - Sexta etapa da cria^do do layout. 

Consulte o arquivo desta etapa e visualize o resultado no navegador. Redimensione 
a janela do navegador e observe o comportamento do layout. 
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